jQuery: элементы высшего уровня, содержащие x

Question

Я ищу способ выбрать элементы, которые содержат определенный элемент, а затем отфильтровать результаты, чтобы получить только самый высокий уровень.Сложно объяснить, но проще с примером:

<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>

В этом случае я бы хотел, чтобы мой набор содержал #one и #four.Если я попытаюсь сделать что-то вроде этого:

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

Я получу элементы #one, #two и # four.

Примечание. Под «самым высоким уровнем» подразумевается самый верхний элемент впервый селектор, $('div') в данном случае.

Answer 1

Ну, определение того, что такое highest level, немного двусмысленно, потому что на практике, если на вашей странице есть .find-me, родительский элемент самого высокого уровня будет тегом html!что бесполезно.

Определив вашу проблему более конкретно, вы можете придумать более четкое определение для этого highest-definition и, например, сказать the farthest div parent et.и для обхода родительских элементов вы можете использовать методы .parents() и .closest().

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

, очевидно, если у вас более одного вхождения find-me, вам нужно запустить это в .each() loop.

см. Пример здесь: http://jsfiddle.net/GsQDb/3/

Answer 2

Предполагая, что под «верхним уровнем» вы подразумеваете прямого потомка тега body, вы можете использовать этот один вкладыш. Он находит все объекты с классом .find-me, затем ищет у родителей тег, который является потомком тега body (который будет верхним уровнем).

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

Вы можете увидеть это здесь: http://jsfiddle.net/jfriend00/9LF6u/

Это имеет следующие преимущества:

1. Любой тип тега может быть тегом верхнего уровня (не просто div)
2. Это должен быть один из самых быстрых способов сделать это, поскольку он находит объекты .find-me (которые будут быстрыми операциями внутри большинства браузеров с помощью getElementsByClassName) и просто перемещается по их родительской иерархии.
3. Он автоматически обрабатывает дубликаты, поэтому данный элемент верхнего уровня никогда не будет указан более одного раза.
4. Если вы когда-нибудь захотите изменить определение верхнего уровня (например, на контейнерный объект), вы можете просто изменить селектор, переданный методу .parents(selector), чтобы отразить это изменение.

Answer 3

Это будет делать то, что вы хотите, сначала он найдет элементы, а затем найдет их самые высокие элементы и создаст объект jQuery из найденных самых высоких элементов.

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 4

используйте фильтр, чтобы отфильтровать элементы, которые не соответствуют тому, что вы хотите после вашего первого селектора.пример:

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

Answer 5

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

Answer 6

Можете ли вы назначить класс для самых верхних дивов? Если это так, вы можете сделать что-то вроде этого:

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

Answer 7

Если вы положите их все в один большой контейнер, вы можете использовать:

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

Это ДОЛЖНО работать, хотя у меня нет возможности проверить это прямо сейчас.

Дайте мне знать, если нет, так как есть и более сложные решения.