-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 を持つ要素は 1 つだけ許可されます。これが理由です (内部的に jQuery は、1 つの要素を返す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

複数の同じ 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」に一致する最初の要素を選択することを意味します。あなたがしたいことは、代わりにクラスを使用することです。または、id $('div[id="box"]') を使用することを主張する場合は、あなたが望むことを行います

于 2012-12-20T18:13:57.770 に答える