javascript - jQuery 中的直接子选择器

Question

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

<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>

当我在上面的 HTML 上运行此 javascript 时，输出会将所有列表项更改为“fruits”，包括 id="two"的列表项。既然直接选择器 (>) 应该只选择 id="one"的 ul 元素的直接子元素，那么为什么会发生这种情况呢？

Answer 1

您告诉 jQuery 将所有子列表项的内容更改为“fruits”，因此它会清除嵌套列表并执行此操作。如果您想跳过包含其他列表的列表项，那么您需要告诉它:

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

<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>