Question

我在以下树结构中有一些递归HTML：

div.item
 div.content
  input
  div.container
   div.item
    div.content
     input
     div.container
      div.item
       etc...

这是一个带有工作示例的jsfiddle：http://jsfiddle.net/HWHRZ/

我还有一个对象，每个.item div都有jQuery引用。

我想要做的是，对于任何特定的.item，只选择下面的输入，不包括任何更深.container或.item元素中的输入。

为了使事情变得更复杂，并非每个.item都有与输入相同的布局。有时输入可能在其他div元素中，因此使用简单的.find('> .content :input')选择它们并不总是有效。

我找到了一个解决方案，但是对于大树来说效率很低而且不够优雅：$(':input', $item).not($('.container :input', $item)).toggleClass('changed'); （$item是我保留在对象中的引用）。这个解决方案可以正常工作，但对于任何足够大的树结构而言效率太低，not()必须处理大量节点。

简而言之：我需要选择不在特定其他子节点内的特定子节点。

有人知道更有效的方法吗？

Answer 1

我认为

$.each($($(".item")[0]).children(".changed"),function(){
$(this).removeClass("changed")
})

应该有用。

Answer 2

此功能可能会有所帮助：

$.fn.childrenUntil = function( selector, result)
{
    result = typeof result !== 'undefined' ? result : new $();
    this.children().each( function(){
       var thisObject = $( this );
        if( thisObject.is( selector ) ) 
            result.push( this );
        else
            thisObject.childrenUntil( selector, result );
    });
    return result;
}

它遍历树，直到遇到选择器。

jQuery只选择子类直到特定类

2 个答案: