jQuery selector some problems

Question

Why my function hiding only one id element. I thought it should hide everything with id #foo. Fiddle

$(function(){
    $('#foo').hide();
});

Here is my HTML

<div id='foo'>Hi there</div>
<div id='foo'>Hi there</div>
<div id='foo'>Hi there</div>
<div id='foo'>Hi there</div>
<div id='foo'>Hi there</div>

Because IDs must be **unique**. If you are unsure how a selector work, I recommend to read its [**documentation**](http://api.jquery.com/id-selector/) first: *"Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid."* — Felix Kling, May 11 '14 at 06:07
Yes, but you should not have multiple elements with the same ID in the first place. — Felix Kling, May 11 '14 at 06:09

score 2 · Answer 1 · answered May 11 '14 at 06:10

id should be unique in html. jquery selector only select single element using id try to add class attribute like below

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>

and for jquery

$(function(){
    $('.foo').hide();
});

mohamedrias · Accepted Answer · 2014-05-11T06:14:34.640

0

This will do the trick.

Best Practice: As IDs must be unique, replace ID with class.

$(function(){
      $(".foo").hide();
});

Anyways: I won't recommend having same IDs

If you can't change the IDs, then the below code will do the trick

 $("[id^=foo]").hide();

DEMO

edited May 11 '14 at 06:14

answered May 11 '14 at 06:09

mohamedrias

18,326
2
38
47

You need not to loop. – Jashwant May 11 '14 at 06:15
@Jashwant Oh ya.. updated answer – mohamedrias May 11 '14 at 06:17

score 0 · Answer 3 · answered May 11 '14 at 06:09

Change your html to:

<div id='foo1'>Hi there</div>
<div id='foo2'>Hi there</div>
<div id='foo3'>Hi there</div>
<div id='foo4'>Hi there</div>
<div id='foo5'>Hi there</div>

and use jquery like this:

$(function(){
  $('[id^=foo]').hide();
});

Ids have to be unique. You could alwyas use a class and call it like this: $('.class').hide()

Or just use classes:

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>

And jQuery:

$(function(){
  $('.foo').hide();
});

score 0 · Answer 4 · answered May 11 '14 at 06:10

Because it consider the first element with the ID is 'foo' and that must be unique through out web page, you can use class in this case.

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>

$(function(){
    $('.foo').hide();
});

score 0 · Answer 5 · answered May 11 '14 at 06:10

0

ID is unique identifier, so you must use class selector.

check this demo js Fiddle

jQuery

$(function(){
    $('.foo').hide();
});

answered May 11 '14 at 06:10

Jaykumar Patel

26,836
12
74
76

score 0 · Answer 6 · answered May 11 '14 at 06:10

0

use

 $(function(){
    $('div#foo').hide();
});

http://plnkr.co/edit/?p=preview

I agree however with other people that you should used class in this context.

answered May 11 '14 at 06:10

aamir sajjad

3,019
1
27
26

score 0 · Answer 7 · answered May 11 '14 at 06:10

0

You should have used class name instead.

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>


$(function(){
    $('.foo').hide();
});

answered May 11 '14 at 06:10

Dhaval Marthak

17,246
6
46
68

score 0 · Answer 8 · answered May 11 '14 at 06:11

0

HTML only allows you having a unique ID for each element.Instead declare it as a class.

Try this after declaring all a class.

 $('.foo').hide()

answered May 11 '14 at 06:11

log N

925
9
33

score 0 · Answer 9 · answered May 11 '14 at 06:12

IDshould be unique. Your HTML is incorrect. You'll get unexpected results if you use same ID multiple times in document.

Since, ID is supposed to be unique, jQuery just grabs the first element of the set.

Change your html to,

<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>
<div class='foo'>Hi there</div>

and then use,

$(function(){
  $('foo').hide();
});

jQuery selector some problems

9 Answers9

jQuery