Jquery doesn't select all

Question

Possible Duplicate:
jQuery id selector works only for the first element

I want jquery to select all divs with id = box:

<!DOCTYPE html>
    <head>
    <link rel="stylesheet" href="css/main.css" type="text/css"/>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="js/sizer.js"></script>
        <title>
        Design tests
        </title>
    </head>
    <body>
        <div id="box" style="width:300px;">
        Hallo
        </div>

        <div id="box" style="width:300px;">
        Hallo
        </div>

    <script>    
    $(document).ready(function(){
        $("#box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
    });
    </script>
    </body>
</html>

But it only selects the first one. Can somebody please help me? This isn't difficult is it?

Why all the downvotes? Just because a question is basic doesn't mean it's bad. — Forty-Two, Dec 20 '12 at 18:16
LoL, you can't have more than one id. Use Class names instead. `
` and then `$(".box")` — SpYk3HH, Dec 20 '12 at 18:17
@Forty-Two I agree. this shouldn't be upvoted but so many downvotes... that's not necessary... — Denys Séguret, Dec 20 '12 at 18:17

score 14 · Accepted Answer · answered Dec 20 '12 at 18:10

14

HTML allows only one element with a given id. That's the reason (internally jQuery uses getElementById which returns one element).

From the spec :

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.

If you want to select more than one element, use a class, not an id :

    <div class="box" style="width:300px;">
    Hallo
    </div>

    <div class="box" style="width:300px;">
    Hallo
    </div>

<script>    
$(document).ready(function(){
    $(".box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>

answered Dec 20 '12 at 18:10

Denys Séguret

372,613
87
782
758

@AtifMohammedAmeenuddin No : I'm past the rep cap since a long time. – Denys Séguret Dec 20 '12 at 18:13
yeah I know.. I wish I could get there soon.. – Atif Dec 20 '12 at 18:14
1

But this answer brought me my 17th hat :) – Denys Séguret Dec 20 '12 at 18:15

score 6 · Answer 2 · answered Dec 20 '12 at 18:10

You cannot have more than 1 same ID, use a class instead

<!DOCTYPE html>
    <head>
    <link rel="stylesheet" href="css/main.css" type="text/css"/>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="js/sizer.js"></script>
        <title>
        Design tests
        </title>
    </head>
    <body>
        <div class="box" style="width:300px;">
        Hallo
        </div>

        <div class="box" style="width:300px;">
        Hallo
        </div>

    <script>    
    $(document).ready(function(){
        $(".box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
    });
    </script>
    </body>
</html>

score 2 · Answer 3 · answered Dec 20 '12 at 18:13

change your selector to div#box and it'll work like so

$(document).ready(function(){
    $("div#box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});

Also note that it's bad practice to have multiple elements with the same id.

score 2 · Answer 4 · answered Dec 20 '12 at 18:13

2

The syntax $('#box') means go and select the first element whose id matches "box". What you want to do is using class instead or if you insist on using id $('div[id="box"]') will do what you want

answered Dec 20 '12 at 18:13

Mikayil Abdullayev

12,117
26
122
206

Jquery doesn't select all

4 Answers4