我一直试图解决这个问题,但如果没有一些严肃的解决方法,我似乎无法弄明白。
如果我有以下HTML:
<ul>
<li class="parent"> headertext </li>
<li> text </li>
<li> text </li>
<li> text </li>
<li class="parent"> headertext </li>
<li> text </li>
<li> text </li>
</ul>
现在,我现在如何选择第一个父母后面的<li>
标签(或者第二个)?基本上选择带有<li>
的{{1}}和以下兄弟姐妹,直到它与父类达到另一个class="parent"
。
我可以使用嵌套列表重新构建列表,但我不想这样做。有什么建议?
答案 0 :(得分:11)
实际上,您可以使用nextUntil()轻松完成此操作。 不需要编写自己的“nextUntil”,因为它已经存在。
离。 -
$(".a").nextUntil(".b");
或文森特建议 -
$(".parent:first").nextUntil(".parent");
答案 1 :(得分:6)
问题的根源在于,您被归类为父母的<li>
实际上不是<li>
s“下面的父母”。他们是兄弟姐妹。 jQuery有许多功能可以与实际的父母一起工作。我建议你真的修改你的标记。与使用jQuery拼凑一些东西相比,它更快,更干净,更易于维护,并且语义更正确。
答案 2 :(得分:2)
我不认为有没有办法在不使用每个选项的情况下执行此操作,因为任何其他选择器也将选择第二个父级和它的下一个兄弟。
function getSibs( elem ) {
var sibs = [];
$(elem).nextAll().each( function() {
if (!$(this).hasClass('parent')) {
sibs.push(this);
}
else {
return false;
}
});
return $(sibs);
}
答案 3 :(得分:1)
你必须自己运行循环,因为jQuery不知道如何在特定条件下停止。
jQuery.fn.nextUntil = function(selector)
{
var query = jQuery([]);
while( true )
{
var next = this.next();
if( next.length == 0 || next.is(selector) )
{
return query;
}
query.add(next);
}
return query;
}
// To retrieve all LIs avec a parent
$(".parent:first").nextUntil(".parent");
但是你可能会更好地使用一个真正结构化的列表来表示你的父/子关系
<ul>
<li class="parent"> <span>headertext</span>
<ul>
<li> text </li>
<li> text </li>
<li> text </li>
</ul>
</li>
<li class="parent"> <span>headertext</span>
<ul>
<li> text </li>
<li> text </li>
</ul>
</li>
</ul>
答案 4 :(得分:0)
$("li.parent ~ li");
答案 5 :(得分:0)
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var fred = $("li").not('.parent').text();
$('#result').text(fred);
});
});
</script>
</head>
<body>
<a href="#">Click me</a>
<ul>
<li class="parent"> headertextA </li>
<li> text1 </li>
<li> text2 </li>
<li> text3 </li>
<li class="parent"> headertextB </li>
<li> text4 </li>
<li> text5 </li>
</ul>
<div id="result"></div>
</body>
</html>
答案 6 :(得分:0)
我知道这是一个非常老的线程,但是Jquery 1.4有一个名为nextUntil的方法,它可以用于此目的: http://api.jquery.com/nextUntil/