javascript - li ul 内の href 要素へのアクセス

Question

以下のようなDOM要素があります

「ul class='dropdown-menu dropdown-caret'」内の 3 番目の「a href」要素にアクセスし、そのクラス「colorpick-btn」を「colorpick-btn selected」に変更して、最初の「a href」のクラスを設定したい要素を「colorpick-btn」に追加します。

以下しか思いつかなかったのですが、うまくいきません

<script>
        $(document).ready(function () {

            $("#dropdown-menu dropdown-caret li a").removeClass('colorpick-btn').addClass('colorpick-btn selected');

        });
    </script>

Answer 1

li:nth-child(3) a1回目と2回目に使い:first-childます。

jsFiddle の例- あなたが求めていることを行うようです。

$(".dropdown-menu.dropdown-caret li:nth-child(3) a").addClass('selected');
$(".dropdown-menu.dropdown-caret li:first-child a").removeClass('selected');

それとは別に、...dropdown-menu.dropdown-caretとは対照的に使用してください。#dropdown-menu dropdown-caret

Answer 2

var $ul = $('.dropdown-colorpicker .dropdown-caret');
$ul.find('.colorpick-btn.selected').removeClass('selected');
$ul.find('.colorpick-btn').eq(2).addClass('selected');

Answer 3

これには単にnth-childを使用できます。既存のクラスを削除する必要はありません。必要な要素を選択した後、次のような新しいクラスを追加できます

<script>
    $(document).ready(function () {

        $("#dropdown-menu dropdown-caret li:nth-child(3) a").addClass('selected');

    });
</script>

Answer 4

マークアップに、id ドロップダウン メニューを持つ要素がありません。また、dropdown-menu と dropdown-caret は同じ要素を参照しているため、スペースで区切ることはできません。これで始められるはずです：

$(document).ready(function (){
    $(".dropdown-menu.dropdown-caret li:eq(2) a").removeClass('colorpick-btn').addClass('colorpick-btn selected');
});