About getElementById find multiple id name?

Question

I have three id tag

<div id="view_1"></div>
<div id="view_2"></div>
<div id="view_3"></div>

I use getElementsByClassName way it can work

but "class" I take it to delimit css style

How could use document.getElementById find -> "view_1" "view_2" "view_3"

    function hideDIV(){

        var divs = document.getElementById('view'.*);
        for(var i=0; i<divs.length; i++) { 
          divs[i].style.display='none';
        }
    }

enter image description here

ID is a unique identifier. Use `querySelectorAll` and use attribute selector like - `alert(document.querySelectorAll('div[id^="view_"]').length);` — Vigneswaran Marimuthu, Apr 17 '15 at 06:49
@nlstduio what you want actually, can you explain the usecase ? — droidev, Apr 17 '15 at 06:50
thanks a lot , I try explain the usecase , upon I upload a picture , when I close A , then B and C are close too . when I press A , show B , press B show C like this ...... — nlstduio, Apr 17 '15 at 07:40

score 4 · Answer 1 · answered Apr 17 '15 at 06:53

4

You can do this:

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
    if(divs[i].id.indexOf('view_') == 0) {
        divs[i].style.display='none';
    }
}

DEMO

answered Apr 17 '15 at 06:53

Manwal

23,450
12
63
93

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

Use QuerySelectorAll for that:

document.querySelectorAll('[id^="view_"]').id;

This will get all views that start with view_

See: Javascript getElementById base on partial string

edited May 23 '17 at 11:43

Community

1
1

answered Apr 17 '15 at 06:50

Andrew Plummer

1,150
1
12
21

1

QuerySelector returns only the first element. You want QuerySelectorAll – Andrea Ligios Apr 17 '15 at 07:12

score 0 · Answer 3 · answered Apr 17 '15 at 06:54

0

Try doing this : Fiddle

JS:

$('[id*="view"]').hide();

Html:

<div id="view_1"> dcf</div>
<div id="view_2"> DSg</div>
<div id="view_3"> gsde</div>

answered Apr 17 '15 at 06:54

Dipali Vasani

2,526
2
16
30

score 0 · Answer 4 · answered Apr 17 '15 at 07:01

0

No, it won't work.

document.getElementById() method accepts only one argument.

However, you may always set classes to the elements and use getElementsByClassName() instead. Another option for modern browsers is to use querySelectorAll()method:

use $("div[id*='view']")

DEMO :http://jsfiddle.net/mkufymqr/1/

answered Apr 17 '15 at 07:01

Shelly

355
1
7

thanks everyone , Excuse me, if I would add variable in here function hideDIV(idTag){ $('[id*='+idTag+'"_"]').hide(); Is this right way ? – nlstduio Apr 17 '15 at 07:27

score 0 · Answer 5 · answered Apr 17 '15 at 07:17

Vanilla JavaScript

document.querySelectorAll('div[id^="view_"]');

jQuery

$('div[id^="view_"]');

CSS 3

div[id^="view_"] { ... }

But consider using classes, not IDs, to semantically target elements.

Eg: search for all DIVs with the targetDiv class, and add the hidden class to them. Then define the hidden class as display: none in CSS.

About getElementById find multiple id name?

5 Answers5