Home/ Questions/Q 9022797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T05:36:26+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0