查找列表Jquery中的元素

Question

我有这段代码

$('.item_has_children a').first().css("color","red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li class="item_has_children">
        <a href="#">Category 1</a>
        <ul class="submenu">
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
        </ul>
    </li>
    <li class="item_has_children">
        <a href="#">Category 2</a>
        <ul class="submenu">
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
            <li class="menu_item">
                <a href="#">Hello</a>
            </li>
        </ul>
    </li>
</ul>

我想为第一个链接着色：“类别1”和“类别2”。

我尝试但只有第一个链接着色为红色。

感谢您的帮助！

Answer 1

您可以使用直接子选择器>来使用CSS和jquery来定位直接锚元素。

使用CSS：

.item_has_children > a{color:red;}

<强> Working Demo using CSS

使用Jquery：

$('.item_has_children > a').css("color","red");

<强> Working Demo using Jquery

Answer 2

不需要使用javascript，你可以使用CSS。（更好的性能和用户体验）

.item_has_children > a {
    color: red;
}

>此处将选择.item_has_children元素的direct children。

Demo

Answer 3

operator >用于select的立即启动的DOM元素。

$("li.item_has_children > a").css("color","red");