如何计算没有ul的li? [英] How to count li which does not have ul?
本文介绍了如何计算没有ul的li?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要计算没有UL的LI,仅针对第一级,
,但是当我计算它时,它显示大小4而不是2,它也计算内部LI。
< div class =navigation-container>
< ul class =first-level>
< li>< a href =#>连结1< / a>< / li>
< li>< a href =#>连结2< / a>
< ul>
< li>< a href =#> Link2.1< / a>< / li>
< li>< a href =#> Link2.2< / a>
< ul>
< li>< a href =#> Link 2.2.1< / a>< / li>
< / ul>
< / li>
< / ul>
< / li>
< li>< a href =#>连结< / a>< / li>
< / ul>
< / div>
jQuery for this。
jQuery(document).ready(function(){
var nosubnav = jQuery('。first-level li:not(:has(ul))');
var nosubnavsize = jQuery('。first-level li:not(:has(ul))')。size();
jQuery(nosubnav).css('border','1px solid red' );
alert('没有子菜单的列表项'+ nosubnavsize);
});
测试链接 link text on JSBin,
谢谢
解决方案您可以使用子选择器
>
仅定位父级下的子元素。 jQuery(document).ready(function(){
var nosubnav = jQuery('。first-level> li:not(:has ();');
var nosubnavsize = jQuery('。first-level> li:not(:has(ul))')。size();
jQuery(nosubnav).css 'border','1px solid red');
alert('没有子菜单的列表项'+ nosubnavsize);
});
这将返回2的计数。您还可以通过重新使用存储的目标li(存储在 nosubnav
中):
jQuery(document)。 ready(function(){
var nosubnav = jQuery('。first-level> li:not(:has(ul))');
nosubnav.css('border' ,'1px solid red');
alert('没有子菜单的列表项'+ nosubnav.length);
});
这将减少第二次查询DOM的开销。
Hi I want to count LI which does not have the UL , for the first level only, but when I count this it shows size 4 instead of 2, its count the inner LI also.
<div class="navigation-container">
<ul class="first-level">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link2.1</a></li>
<li><a href="#">Link2.2</a>
<ul>
<li><a href="#">Link 2.2.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link </a></li>
</ul>
</div>
jQuery for this.
jQuery(document).ready(function(){
var nosubnav = jQuery('.first-level li:not(:has(ul))');
var nosubnavsize = jQuery('.first-level li:not(:has(ul))').size();
jQuery(nosubnav).css('border' , '1px solid red');
alert('List item which does not have submenu '+nosubnavsize);
});
Link for the testing link text on JSBin,
thanks
解决方案
You can use the child selector >
to target only child elements directly under the parent.
jQuery(document).ready(function(){
var nosubnav = jQuery('.first-level > li:not(:has(ul))');
var nosubnavsize = jQuery('.first-level > li:not(:has(ul))').size();
jQuery(nosubnav).css('border' , '1px solid red');
alert('List item which does not have submenu '+nosubnavsize);
});
This will return the count of 2. You can also optimise this slightly by reusing your stored selection of the target li (stored in nosubnav
):
jQuery(document).ready(function(){
var nosubnav = jQuery('.first-level > li:not(:has(ul))');
nosubnav.css('border' , '1px solid red');
alert('List item which does not have submenu '+nosubnav.length);
});
This will cut out the overhead of querying the DOM a second time.
这篇关于如何计算没有ul的li?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文