jQuery selektor filtrujący do usuwania elementów zagnieżdżone dopasowanie wzorca

Question

W tej próbki znaczników (przy założeniu, że dowolną liczbę elementów pomiędzy .outer i .inner:

<div class="outer"> 
    <div> 
     <div> 
      <div class="inner"></div> 
     </div> 
    </div> 
</div> 

można skonfigurować jQuery wybranie zewnętrzne i wewnętrzne div w następujący sposób:

$outer = $('.outer'); 
$inner = $outer.find('.inner') 

działa dobrze.

jednak powiedzmy chcę, aby umożliwić nieograniczoną zagnieżdżenie tej logiki, więc może mam jes s:

<div class="outer"> div a 
    <div class="inner"> div b 
     <div class="outer"> div c 
      <div class="inner"> div d </div> 
     </div> 
    </div> 
</div> 

W tej sytuacji, przy wyborze div via .outer Chcę dopasować go tylko div b. Innymi słowy, chcę wykluczyć przodków z zagnieżdżonego przodka .outer.

Chciałbym mieć parings of outer i inner (s) zawarte w ich poziomie gniazdowania.

Mam nadzieję, że .filter() może go usunąć, ale nie może myśleć o selektorze, który działałby uniwersalnie dla nieograniczonych wzorów zagnieżdżonych. Czy można to zrobić za pomocą filtra? A może nawet bezpośredni wzór selektora?

UPDATE:

Myślę, że coś takiego może działać, ale nie wiem, jak można (lub jeśli jest to dozwolone) odniesienie 'to' w selektor:

$outer = $('.outer'); 
$inner = $outer.not('this .outer').find('.inner') 

UPDATE 2:

Powinienem był o tym wspomnieć: .inner zawsze będzie potomkiem .outer, ale niekoniecznie bezpośrednim dzieckiem.

UPDATE 3:

Oto kilka próbek testowych HTML, które mogłyby zostać wykorzystane. W każdym przypadku chciałbym móc wybrać .outer i sparować plik .inner, który zawiera między sobą i zagnieżdżoną zewnętrzną. Dla jasności, to dodaje nazwisk każdej div (zewnętrzna x pary z wewnętrznymi-X)

//sample 1 
<div class="outer"> outer-a 
    <div> 
     <div class="inner"> inner-a 
      <div class="outer"> inner-b 
       <div class="inner"> inner-b </div> 
      </div> 
     </div> 
    </div> 
    <div> 
     <div class="inner"> inner-a </div> 
    </div> 
</div> 

//sample 2 
<div class="outer"> outer-a 
     <div class="inner"> inner-a 
      <div class="outer"> inner-b 
       <div> 
        <div class="inner"> inner-b </div> 
       </div> 
      </div> 
     </div> 
</div> 

//sample 3 
<div class="outer"> outer-a 
     <div class="inner"> inner-a 
      <div class="outer"> inner-b 
       <div class="inner"> inner-b 
        <div class="outer"> outer-c 
         <div class="inner"> inner-c</div> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 

//bonus sample (we're trying to avoid this) 
<div class="outer"> outer-a 
     <div class="inner outer"> inner-a outer-b 
      <div class="inner"> inner-b </div> 
     </div> 
</div> 

UPDATE 4

myślę skończyło się w dół podobną drogą jak Gnarf. Skończyło się to:

var $outer = $('.outer'); 
var $inner = $outer.find('.inner').filter(function(){ 
    $(this).each(function(){ 
     return $(this).closest('.outer') == $outer; 
    });                 
}); 

Czy jestem na dobrej drodze? To nie działa, więc zakładam, że mam jeszcze pewien błąd logiczny.

Answer 1

Oto kolejna opcja. Załóżmy, że masz .outero, to wybrać wszystkie inner s pod nim:

o.find('.inner').not(o.find('.outer .inner')) 

Powinien działać identycznie do odpowiedzi Gnarf, ale nieco prostsze.

Najpierw znajduje wszystkie inner s pod tym outer.
Następnie usuń wszystkie inners że są potomkami innych outers

Interaktywny przykład praca: http://jsfiddle.net/Zb9gF/

wydajność Selector wydaje się być znacznie lepiej przy użyciu tej metody w przeciwieństwie do .filter() także: http://jsperf.com/selector-test-find-not

Answer 2

$('.outer').children('.inner'); 

To by wybrać dowolny inner który znajduje się bezpośrednio pod w outer. Nie wiem dokładnie, do jakiego diva chcesz wybrać. Czy to a, b, c, czy d? Posiadanie czegoś o nazwie zewnętrznej zagnieżdżonej w czymś zwanym wewnętrznym nie ma większego sensu. Może gdybyś mógł podać bardziej konkretny przykład?

Answer 3

Można użyć trochę css Magic:

$('.outer>.inner') 

shold daje tylko pierwszy poziom .inner elementów. :)

Answer 4

Jeśli .inner zawsze są bezpośrednimi dzieci .outer s - children() jest prawdopodobnie najlepszym (odpowiedź jasongetsdown za)

Jeśli potrzebujesz czegoś, co wygląda jeszcze głębiej, można zrobić coś takiego:

var $outer = $('.outer').first(); // grab the first .outer 
$outer.find('.inner').filter(function() { 
    // only if the closest parent .outer is the same as the .outer we are looking in 
    return $(this).closest('.outer').get(0) == $outer.get(0); 
}).css('border','1px solid #000'); 

jsfiddle demo

Answer 5

Jeśli zakładamy prawidłowo chcesz wybrać wszystkie .inner który jest pod o .outer, z wyjątkiem jeśli istnieje .outer pomiędzy nimi, być może po zadziała (niesprawdzone):

$('.outer:not(.inner):has(:not(.outer) .inner:not(.outer), > .inner:not(.outer))'); 

aktualizowane po teście na PO przykład HTML na http://jsfiddle.net/cEwBT/1/

Answer 6

I Zastanawiam się, dlaczego najpierw nie wybrać .inner, a następnie uzyskać closest.outer?

 
$inner = $('.inner'); 
$outer = $inner.closest('.outer'); 

w przypadku niektóre wewnętrzne bloki mogą być nie w blokach zewnętrznych w ogóle używać tego pierwszego wiersza zamiast

$inner = $('.outer .inner');