访问 li ul 中的 href 元素答案

【问题标题】：accessing a href element inside li ul访问 li ul 中的 href 元素
【发布时间】：2013-11-15 03:50:56
【问题描述】：

我的 DOM 元素如下所示

我想访问“ul class='dropdown-menu dropdown-caret'”中的第三个“a href”元素，并将其类“colorpick-btn”更改为“colorpick-btn selected”并将类设置为第一个“一个 href" 元素到 "colorpick-btn"。

我只能想出下面但我不能让它工作

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

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

        });
    </script>

【问题讨论】：

没有id为dropdown-menu的元素
你怎么知道你想改变第三个li a元素
为什么要删除类 'colorpick-btn' 并同时再次添加相同的类？

标签： javascript jquery html css dom

【解决方案1】：

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

【讨论】：

【解决方案2】：

第一个使用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..

【讨论】：

你/发帖人忘记了选择器中的句点。
@TreeTree 谢谢 - 用截图很难分辨。我只是复制/粘贴然后修改了 OP 正在使用的代码......现在应该可以工作了。
感谢您的回答！由于某种原因，它仍然无法正常工作。我在我的应用程序上使用第三方主题。所以我只想更改一些配色方案而不更改默认样式。 wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR.
@chamara 你用的是$(document).ready，对吧？确保你也有 jQuery.. 它在演示中工作..

【解决方案3】：

在您的标记中，您没有任何带有 id 下拉菜单的元素。此外，dropdown-menu 和 dropdown-caret 引用相同的元素，不应以空格分隔。这应该可以帮助您开始：

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

【讨论】：

【解决方案4】：

您可以简单地使用 nth-child。无需删除现有的类，选择你想要的元素后，你可以像下面这样添加新的类

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

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

    });
</script>

【讨论】：