訪問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) a作為第一個，並且: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

在您的標記中，您沒有任何帶有ID下拉菜單的元素。 此外，下拉菜單和下拉菜單引用相同的元素，不應該用空格分隔。 這應該讓你開始：

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

Answer 4

你可以簡單地使用nth-child 。 選擇你想要的元素后，無需刪除現有的類，可以添加像bellow這樣的新類

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

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

    });
</script>