jQuery: elementy najwyższego poziomu zawierające x

Question

Szukam sposobu na wybranie elementów, które zawierają określony element, a następnie filtrowanie wyników w celu uzyskania tylko najwyższego poziomu. Trudne do wyjaśnienia, ale łatwiejsze przykładzie:

<div id="one"> 
    <div id="two"> 
     <div id="three" class="find-me"></div> 
    </div> 
</div> 
<div id="four"> 
    <div id="five" class="find-me"></div> 
</div> 

W tym przypadku, chciałbym żeby mój zestaw zawiera #one i #four. Gdy próbuję zrobić coś takiego:

var elements = $('div').has('.find-me'); 

uzyskać elementy #one, #two i #four.

Uwaga: "Najwyższy poziom" odnosi się do najwyższego elementu w pierwszym selektorze, $('div') w tym przypadku.

Answer 1

Well definicji co highest level jest, jest nieco dwuznaczna, ponieważ w praktyce, jeżeli istnieje jakikolwiek .find-me na swojej stronie najwyższy poziom rodzic byłby html tag! co jest bezużyteczne.

Dzięki dokładniejszemu zdefiniowaniu problemu można uzyskać jaśniejszą definicję tego highest-definition i na przykład powiedzieć the farthest div parent i innych. i aby przemierzyć rodziców elementu, można użyć metod: .parents() i .closest().

var farthestDiv = $(".find-me").parents("div").last(); 

oczywiście, jeśli masz więcej niż jeden wystąpień o find-me trzeba uruchomić to w .each() pętli.

zobaczyć przykład tutaj: http://jsfiddle.net/GsQDb/3/

Answer 2

Jeśli umieścić je wszystkie w jeden duży pojemnik div, można użyć:

$('.container div.find-me').parents($('.container').children()); 

który powinien działać, chociaż nie mam okazję przetestować go teraz.

Daj mi znać, jeśli nie, ponieważ istnieją również bardziej złożone rozwiązania.

Answer 3

użyj filtra, aby odfiltrować elementy, które nie pasują do tego, co chcesz, po pierwszym selektorze. na przykład:

var elements = $('div.find-me').filter(function(idx){ 
    return !$(this).parents('div.find-me').length; 
}); 

Answer 4

Czy można przypisać klasę do najlepszych najbardziej div? Jeśli tak można zrobić coś takiego:

var elements = $("div.topMost").has(".find-me"); 

Answer 5

to zrobi to, co chcesz, to znaleźć elementy, a potem znaleźć najwyższe elementy te i utworzyć obiekt jQuery z najwyższych znalezionych elementów.

var elements = $('div.find-me'), highest = []; 

elements.each(function(){ 
var parent = this, body = document.body; 

    while(parent && parent.parentNode !== body) { 
    parent = parent.parentNode; 
    } 

    if($.inArray(parent, highest) < 0) { 
    highest.push(parent); 
    } 
}); 

highest = jQuery(highest); 

jsfiddle:

http://jsfiddle.net/D3jC8/2/

Answer 6

Zakładając o "najwyższym poziomie", masz na myśli bezpośrednim potomkiem znacznika body, można użyć tej jednej wkładki. Znajduje wszystkie obiekty z klasą .find-me, a następnie wyszukuje elementy nadrzędne dla znacznika będącego potomkiem znacznika body (który będzie najwyższym poziomem).

$(".find-me").parents("body > *") 

Widać to działa tutaj: http://jsfiddle.net/jfriend00/9LF6u/

ta ma następujące zalety:

1. Każdy typ tagu może być najważniejszym tag poziom (nie tylko div)
2. It powinien być jednym z szybszych sposobów, aby to zrobić, ponieważ znajduje obiekty .find-me (które będą szybką operacją wewnętrzną w większości przeglądarek przez getElementsByClassName) i po prostu podchodzi do ich hierarchii nadrzędnej.
3. Automatycznie obsługuje duplikaty, aby dany element najwyższego poziomu nigdy nie był wyświetlany więcej niż jeden raz.
4. Jeśli kiedykolwiek chcesz zmienić definicję najwyższego poziomu (na przykład do obiektu kontenera), możesz po prostu zmienić selektor przekazany do metody .parents(selector), aby odzwierciedlić tę zmianę.

Answer 7

$(".find-me").map(function() { 
    return $(this).parents("div").last().get(); 
});