-3

可能重复：
jQuery id 选择器仅适用于第一个元素

我希望 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>

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

4

4 回答 4

14

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

从规格：

id = 名称 [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>
于 2012-12-20T18:10:00.810 回答
6

您不能拥有超过 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>
于 2012-12-20T18:10:34.477 回答
2

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

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

另请注意，让多个元素具有相同的 id 是不好的做法。​</p>

于 2012-12-20T18:13:36.880 回答
2

语法 $('#box') 意味着去选择第一个 id 匹配“box”的元素。你想要做的是使用 class ，或者如果你坚持使用 id $('div[id="box"]') 会做你想做的事

于 2012-12-20T18:13:57.770 回答