Question

可能重复：
jQuery id selector works only for the first element

我希望jquery选择id = box的所有div：

<!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>

但它只选择第一个。有人能帮帮我吗？这不难吗？

Answer 1

HTML只允许一个具有给定ID的元素。这就是原因（内部jQuery使用getElementById返回一个元素）。

来自the spec：

id = name [CS]

此属性为元素指定名称。该名称在文档中必须是唯一的。

如果要选择多个元素，请使用类，而不是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>

Answer 2

您不能拥有超过1个相同的ID，而是使用类

<!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>

Answer 3

将您的选择器更改为div#box，它会像这样工作

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

另请注意，拥有多个具有相同ID的元素是不好的做法。

Answer 4

语法$（'＃box'）表示go并选择id与“box”匹配的第一个元素。你想要做的是使用类，或者如果你坚持使用id $（'div [id =“box”]'）你会做你想做的事情

Jquery不会全部选择

4 个答案: