Question

以下代码非常简单......但它给我带来了一些麻烦：

<html>
    <head>
        <script src="jquery-1.11.1.min.js"></script>
        <style type="text/css">
            .emphasis{
                color: #ff0000;
            }
        </style>
    </head>
    <body>

        <ul>
            <li>hello</li>
            <li>hello 2</li>
            <li> hello3</li>
            <ul>    
                <li>this is another</li>
            </ul>   
        </ul>


<!-- from here we start the jquery code -->         
        <script type="text/javascript">
            $("ul").children("li:nth-child(1)").addClass("emphasis");
        </script>
    </body>
</html>

现在问题是这段代码是将emphasis类添加到第一个ul的第一个孩子，同时又将类emphasis添加到第二个{{1} } ul 我没有告诉jquery这样做

演示

jsfiddle链接如下： jsfiddle

我可能是错的，因为我不太了解jquery并试图改进它

谢谢

Answer 1

这不是有效的HTML。作为<ul>的孩子，您不能拥有<ul>。首先改变它。

完成后，你可以这样做

$('ul > li:first').addClass('emphasis');

>表示直接孩子

Answer 2

您的选择器指向所有<ul>元素，然后指向其第一个子<li>元素。您需要更具体地选择一个。如果你想过滤掉任何<ul>，你可以添加另一个过滤器：

$("ul").children("li:nth-child(1)").each(function() {
    var e = $(this);
    if(e.parents('ul').length == 1) {
        e.addClass("emphasis");
    }
});

.emphasis{
    color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>hello</li>
    <li>hello 2</li>
    <li> hello3</li>
    <ul>    
        <li>this is another</li>
    </ul>   
</ul>

Answer 3

你的jQuery选择器描述了一个非常常见的关系（ul的第一个孩子）。将ID添加到第一个ul，以便您可以专门选择它。

$('#myList > li:first-child').addClass('emphasis');

为什么在没有告诉jquery这样做的时候添加一个类

演示

3 个答案: