CODEWITHSUNDEEP
jqueryeach
Cristiano Marques
Cristiano Marques

Reputation: 93

jquery each element id

For some reason its only finding one div instead of finding all divs with that id.

JS:

jQuery('#showoffline').click(function(){
    jQuery.each(jQuery('#offlineestreams'),function(){
        jQuery(this).css("display","block");
    });
});

Divs are something like this:

<div id="offlineestreams" style="display = none;">
Something here
</div>
<div id="offlineestreams" style="display = none;">
Something here2
</div>

But only the first one shows :\ Why is that happening?

Upvotes: 1

Views: 2037

Answers (5)

heypaxton
heypaxton

Reputation: 11

IDs in the DOM should be unique. If you have multiple elements with the same id, I recommend changing them to classes. Then run your each function on the classes. Then you could do your javascript as follows:

$('#showoffline').click(function(){
  $.each($('.offlineestreams'), function(){
    $(this).css({'display': 'block'});
  });
});

Also update your HTML:

<div class="offlineestreams" style="display:none;">Something here</div>
<div class="offlineestreams" style="display:none;">Something here</div>

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67197

ID must be unique, You have duplicated the id offlinestrams. An alternate solution would be add a class to the divs which you are going to group. try some thing like below,

HTML

<div class="offlineestreams">
    Something here
</div>
<div class="offlineestreams">
    Something here2
</div>

JQUERY

jQuery('#showoffline').click(function(){
     jQuery(".offlinestream").hide();
});

DEMO

Upvotes: 1

David
David

Reputation: 218807

Since element ids are required to be unique, this behavior is undefined and browser-specific. Sometimes you might get one result, sometimes all, perhaps sometimes even none.

Use a class instead of an id, or make the ids unique.

<div class="offlineestreams" style="display = none;">
    Something here
</div>
<div class="offlineestreams" style="display = none;">
    Something here2
</div>

and...

jQuery('.offlineestreams') ...

Additionally, any time you experience unexpected behavior in rendering, DOM element selection/traversal, etc. a very useful first step would be to validate the markup. If the markup is invalid, you'll want to fix it before trying to debug the issue regarding that markup.

Upvotes: 0

The Drake
The Drake

Reputation: 36

id's should be unique. Try adding a class to the divs you want eg:

<div id="offlinestreams1" class="offlinestreams" style="display = none;">
Something here
</div>
<div id="offlinestreams2" class="offlinestreams" style="display = none;">
Something else here
</div>

and then your script could be:

jQuery('#showoffline').click(function(){
    jQuery.each(jQuery('.offlineestreams'),function(){
        jQuery(this).css("display","block");
    });
});

Upvotes: 0

Phil
Phil

Reputation: 11175

ids must be unique, i am pretty sure jQuery('#offlineestreams') will only return 1 object. you should be using classes

Upvotes: 0

Related Questions