我有一个ul列表,其中包括一个儿童ul.我试图只针对第一个li,排除儿童li。
这是我的列表。
<li class="sf-field-taxonomy">
<ul>
<li class="sf-level-0">
<input id="sf-input">
<label>aaaa</label>
<ul class="children">
<li class="sf-level-1">
<input id="sf-input">
<label>bbbb</label>
</li>
<li class="sf-level-1">
<input id="sf-input">
<label>cccc</label>
</li>
<li class="sf-level-1">
<input id="sf-input">
<label>dddd</label>
</li>
<li class="sf-level-1">
<input id="sf-input">
<label>eeee</label>
</li>
</ul>
</li>
</ul>
</li>
通过使用这段代码,我可以只针对子项li。
$(".sf-field-taxonomy li:not(:has(ul))").click(function(){
console_log("children");
});
但我不能只访问第一个li(并排除子li),以下是我试过的方法。
$(".sf-field-taxonomy ul li").not(".children li").click(function(){
console_log("parent");
});
我不知道我做错了什么,有人能帮帮我吗?
谢谢
问题是子元素中的点击会冒泡到父元素。你需要为子元素写一个点击处理程序,以防止冒泡。
$(".sf-field-taxonomy > ul > li").click(function() {
console.log("Parent");
});
$(".children").click(function(e) {
e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="sf-field-taxonomy">
<ul>
<li class="sf-level-0">
<input id="sf-input">
<label>aaaa</label>
<ul class="children">
<li class="sf-level-1">
<input id="sf-input">
<label>bbbb</label>
</li>
<li class="sf-level-1">
<input id="sf-input">
<label>cccc</label>
</li>
<li class="sf-level-1">
<input id="sf-input">
<label>dddd</label>
</li>
<li class="sf-level-1">
<input id="sf-input">
<label>eeee</label>
</li>
</ul>
</li>
</ul>
</li>