【问题标题】：How to find the last ul in every li using jquery?如何使用 jquery 找到每个 li 中的最后一个 ul？
【发布时间】：2018-06-26 06:59:09
【问题描述】：
我有一个清单
<ul class="mtree default">
<li class="cat-item cat-item-224 cat-parent mtree-node mtree-open">
<a href="#" style="cursor: pointer;">Lidingö</a>
<ul class="children mtree-level-1">
<li class="cat-item cat-item-444">
<a href="#" style="cursor: pointer;">Direktåtkomst Förrådslänga</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-504">
<a>7 kvm (1199 kr/mån)</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-314">
<a href="#" style="cursor: pointer;">Hissplan</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-674">
<a href="#">0,5 kvm (349 kr/mån)</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
你知道如何找到 .cat-item-444 和 cat-item-314 的最后一个 ul 然后选择 7 kvm (1199 kr/mån) 和 0,5 kvm (349 kr/mån) 在一个 jquery 代码中？选中的标签应该有 .css('border', '1px solid red');
【问题讨论】：
标签：
javascript
jquery
html
css
【解决方案1】：
为此，您可以使用:last-child 选择器在每个子级别ul 中查找最后一个li，如下所示：
$('.cat-item > ul li ul li:last-child').addClass('foo');
.foo {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mtree default">
<li class="cat-item cat-item-224 cat-parent mtree-node mtree-open">
<a href="#" style="cursor: pointer;">Lidingö</a>
<ul class="children mtree-level-1">
<li class="cat-item cat-item-444">
<a href="#" style="cursor: pointer;">Direktåtkomst Förrådslänga</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-504">
<a>7 kvm (1199 kr/mån)</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-314">
<a href="#" style="cursor: pointer;">Hissplan</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-674">
<a href="#">0,5 kvm (349 kr/mån)</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
如果您只想在第二级获得li，并且有多个较低的级别，那么您需要添加额外的子选择器，例如.cat-item > ul > li > ul > li:last-child，但是鉴于提供的 HTML，以上将起作用。
还要注意addClass() 的使用超过css()。这是首选，因为您真的不想在 JS 中直接放置任何样式规则；它们属于 CSS。
【解决方案2】：
动态版本怎么样 :)
$(".cat-item li:not(:has('ul')) a").addClass('foo');
.foo {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mtree default">
<li class="cat-item cat-item-224 cat-parent mtree-node mtree-open">
<a href="#" style="cursor: pointer;">Lidingö</a>
<ul class="children mtree-level-1">
<li class="cat-item cat-item-444">
<a href="#" style="cursor: pointer;">Direktåtkomst Förrådslänga</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-504">
<a>7 kvm (1199 kr/mån)</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-314">
<a href="#" style="cursor: pointer;">Hissplan</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-674">
<a href="#">0,5 kvm (349 kr/mån)</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
【解决方案3】：
试试这个：
$('.children li.cat-item').each(function() {
console.log($(this).find('ul:last-child li a').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mtree default">
<li class="cat-item cat-item-224 cat-parent mtree-node mtree-open">
<a href="#" style="cursor: pointer;">Lidingö</a>
<ul class="children mtree-level-1">
<li class="cat-item cat-item-444">
<a href="#" style="cursor: pointer;">Direktåtkomst Förrådslänga</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-504">
<a>7 kvm (1199 kr/mån)</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-314">
<a href="#" style="cursor: pointer;">Hissplan</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-674">
<a href="#">0,5 kvm (349 kr/mån)</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
【解决方案4】：
使用.last():
$('.cat-item-444 ul li').last().css('border','1px solid red');
$('.cat-item-314 ul li').last().css('border','1px solid red');
debugger
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mtree default">
<li class="cat-item cat-item-224 cat-parent mtree-node mtree-open">
<a href="#" style="cursor: pointer;">Lidingö</a>
<ul class="children mtree-level-1">
<li class="cat-item cat-item-444">
<a href="#" style="cursor: pointer;">Direktåtkomst Förrådslänga</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-504">
<a>7 kvm (1199 kr/mån)</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-314">
<a href="#" style="cursor: pointer;">Hissplan</a>
<ul class="children mtree-level-2">
<li class="cat-item cat-item-674">
<a href="#">0,5 kvm (349 kr/mån)</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>