Geek asks and answers

JQuery selects only children up to a certain class

I have some recursive HTML in the following tree structure:

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

Here's jsfiddle with a working example: http://jsfiddle.net/HWHRZ/

I also have objects with jQuery links for each of the divs .item.

What I want to do, for any particular .item, select only the inputs immediately below it, with the exception of those that are in deeper .containeror .itemelements.

To complicate the situation, not everyone .itemhas an identical layout with respect to the inputs. Sometimes the inputs can be in other elements div, so selecting them with a simple .find('> .content :input')one will not always work.

I found a solution, but it is inefficient with large trees and not at all elegant: $(':input', $item).not($('.container :input', $item)).toggleClass('changed'); ( $item- the link that I hold in the object). This solution works as it should, but is too inefficient for any sufficiently large tree structure, but not()should handle a lot of node.

In short: I need to select specific child nodes that are NOT within certain other child nodes.

Does anyone know a more efficient way to do this?

+3
source share
2 answers

I think,

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

must work.

+1

:

$.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;
}

, .

0

More articles:


All Articles