2009-12-02 67 views
8

我在的jQuery选择的兄弟姐妹“直到”

<input class="parent"></div> 
<input class="child"></div> 
<input class="child"></div> 
<input class="parent"></div> 
<input class="child"></div> 
... 

形式,我知道是不对的,这样做将是改革HTML正道一个DOM,但可以说是不可能。

我怎样才能得到的jQuery选择一个父的所有儿童(即选择所有。孩子直到.parent)

回答

16

的jQuery 1.4现在有.nextUntil(选择)功能:

$('div.parent').toggle(
     function() { 
      $(this).nextUntil('div.parent').hide(); 
     }, 
     function() { 
      $(this).nextUntil('div.parent').show(); 
     } 
    ); 
5

您可以通过nextAlldiv兄弟姐妹元素迭代,直到您找到以下.parent,检查该example :使用

$('.parent').click(function() { 
    $(this).nextAll('div').each(function() { 
    if ($(this).is('.parent')) { 
     return false; // next parent reached, stop 
    } 
    $(this).toggleClass('highlight'); 
    }); 
}); 

标记:

<div class="parent">parent 1</div> 
<div class="child">child</div> 
<div class="child">child</div> 
<div class="parent">parent 2</div> 
<div class="child">child</div> 
<div class="parent">parent 3</div> 
<div class="child">child</div> 
<div class="child">child</div> 
<div class="child">child</div> 

...

+0

我会给这个镜头。我这样做了,但是由于我没有包含一些额外的DOM元素(包装),它造成了很慢的速度。我不认为只是返回假(我一直检查)。 我将优化并再次尝试。谢谢! – jskulski 2009-12-02 00:34:31

5

*请参阅@foson答案jQuery的1.4+ *

退房奔Almans until utils

它给你3有用的方法:nextUntil,prevUntil,parentsUntil。

+1

我结束了这个实用程序,很容易,做到了上述,但我不必保持它;) – jskulski 2009-12-03 22:54:51

+0

这是值得检查@foson答案,告诉nextUntil – Lijo 2012-08-08 11:39:44

0

我认为没有必要对上述自定义函数,JQuery的支持nextUntil(selector, filter)功能这一功能,但你应该添加过滤器只适用于您的脚本过滤元素不是所有的下一个元素:

//hide all .child elements 
$('div.child').hide(); 
$('div.parent').click(function() { 
    //Toggle (show or hide) only .child elements until finding .parent element. 
    $(this).nextUntil('div.parent', 'div.child').slideToggle('slow'); 
});