访问li ul中的href元素

Question

我的DOM元素如下所示

我想访问“ul class ='dropdown-menu dropdown-caret'”中的第3个“a href”元素，并将其类“colorpick-btn”更改为“colorpick-btn selected”并设置第一个类“ a href“element to”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 example - 它似乎按照你的要求行事。

$(".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>