javascript - 访问 li ul 中的 href 元素

Question

我的 DOM 元素如下

我想访问“ul class='dropdown-menu dropdown-caret'”中的第三个“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 下拉菜单的元素。此外，dropdown-menu 和 dropdown-caret 引用相同的元素，不应以空格分隔。这应该让你开始：

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

Answer 4

您可以简单地为此使用nth-child。无需删除现有类，选择所需元素后，您可以添加新类，如下所示

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

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

    });
</script>