$(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 元素的直接子元素,那么为什么会发生这种情况呢?
最佳答案
您告诉 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>
关于javascript - jQuery 中的直接子选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44418026/