Utilizzare jQuery per ottenere discendenti di un elemento che non sono figli di un contenitore con una determinata classe CSS

Question

Ho una situazione in cui ho bisogno di selezionare tutti i discendenti di un certo elemento, ma esclude quelli che sono figli di un contenitore uguale alla classe CSS del contenitore su cui eseguo il mio selettore.

Descrizione piuttosto complicata.

<div class="container"> 
    <div class="element"></div> 
    <div class="element"></div> 
    <div class="element"></div> 
    <div class="element"> 
     <div class="container"> 
      <div class="element"></div> 
      <div class="element"></div> 
      <div class="element"></div> 
     </div> 
    </div> 

Esecuzione di un jQuery .find ('elemento') sulla DIV esterno mi otterrà tutti i div, anche quelli all'interno del secondo contenitore. Questo è quello che cerco di evitare.

Esiste una soluzione di selezione jQuery semplice e rapida per questo caso?

Answer 1

Penso che quello che si desidera utilizzare è il selettore not. Ti piace questa ..

$(".container").not(".container .container") 

In alternativa, è possibile utilizzare il selettore children, per ottenere i bambini da un livello profondo. Quale escluderebbe i div nidificati.

Per essere un po 'più esplicito, penso che vorrete usare il non selettore dopo aver usato il' find '. Come questo:

$(".container").find(".element").not($(".container .container .element")) 

Si può passare una funzione di no, quindi si potrebbe avere quello sguardo funzione ai genitori di ogni partita elemento per vedere se è annidato all'interno di un elemento con la stessa classe.

http://jsfiddle.net/QXfs2/6/

removeIfNested = function(index) { 
    // this is the corrent DOM element 
    var $this = $(this), 
     return_value = false; 

    $.each($this.attr('class').split(/\s+/), function(index) { 
     if ($this.parents("." + this).length > 0) { 
      return_value = default_value || true; 
     } 
    }); 

    return return_value; 
} 


$(".container").find(".element").not(removeIfNested); 

Se si potrebbe aggiungere una classe al contenitore nidificato, che sarebbe l'ideale, quindi è solo:

$(".container").find(".element").not($(".nested .element")) 

Supponendo che si è aggiunto alla classe "annidati", al tuo contenitore interno div.

Answer 2

Per esempio specifico questo dovrebbe funzionare -

$("body > div.container > .element") 

che non potrà che ottenere i migliori div elemento di livello. Se la tua raccolta di elementi era in una struttura diversa, potresti sostituire body con l'id del contenitore della raccolta.

Demo - http://jsfiddle.net/QAP37/

Answer 3

È possibile utilizzare il selettore jQuery come questo:

find('*:not(.container .container *)')