Question

＆＃13;

$(document).ready(function () {
    $("#one > li").text("fruits");
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="one">
        <li>Apple</li>
        <li>
            <ul id="two">
                <li>Mango</li>
                <li>Grapes</li>
            </ul>
        </li>
        <li id="kela">Banana</li>
        <li class="sanatara">Orange</li>
    </ul>

＆＃13;

当我在上面的HTML上运行这个javascript时，输出会将所有列表项更改为＆＃34; fruits＆＃34;包括id =＆＃34; two＆＃34;的那些。由于直接选择器（＆gt;）应该只选择具有id =＆＃34的一个直接子元素;一个＆＃34;那么为什么会这样呢？

Answer 1

您告诉jQuery将所有子列表项的内容更改为＆＃34; fruits＆＃34;，因此它会清除嵌套列表并执行此操作。如果要跳过包含其他列表的列表项，则需要告诉它：

＆＃13;

$(document).ready(function () {
    $("#one > li:not(:has('ul'))").text("fruits");
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="one">
        <li>Apple</li>
        <li>
            <ul id="two">
                <li>Mango</li>
                <li>Grapes</li>
            </ul>
        </li>
        <li id="kela">Banana</li>
        <li class="sanatara">Orange</li>
    </ul>

＆＃13;

Answer 2

实际上，您正在使用的选择器正在告诉＆＃34;使用#one id＆＃34;来挑选所有元素的直接子元素。

如果您只想更改第一项的文字，可以使用＆＃34;：first-child＆＃34;伪类。

$("#one > li:first-child").text("My Text");

有关css伪类的更多信息，请查看this page。

在jQuery中直接选择子项

2 个答案: