Обход дерева JQuery: смешивание ближайших и братьев и сестер

У меня есть структуры, которые выглядят так:

<div class="wanted" id="but-not-really">
    <div class="wanted">
        <div class="dad">
            <input class="reference"/>
            <input class="wanted"/>
            <input class="bro3"/>
        </div>
    </div>
</div>

И я хочу получить ширину либо предка (div.wanted), либо родственного элемента (input.wanted) моего элемента .reference (который равен $(this) в моем цикле JS), в зависимости от того, что ближе всего.

Если бы я хотел искать только по предкам, я бы использовал $(this).closest('.wanted').width(). Если бы я хотел искать только среди братьев и сестер, я бы использовал $(this).siblings('.wanted').width().

Я пытался использовать $(this).parents().find('.wanted').width(), но веб-страница содержит другие элементы документа, которые мешают. Вот почему я ищу ближайший элемент .wanted среди братьев и сестер и предков.

РЕШЕНИЕ № 1 (спасибо @undefined):

Сначала проверьте братьев и сестер, используя метод siblings, если коллекция пуста, используйте closest.

var width = $(this).siblings('.wanted').length === 0
             ? $(this).closest('.wanted').css('width')
             : $(this).siblings('.wanted').css('width');

jquery closest siblings tree-traversal ancestor
person Seeven    schedule 16.09.2014    source источник
comment
Возможно, вам придется вручную перебирать дерево вверх и вниз и вести запись «степени разделения» для сравнения в конце цикла. Я не знаю ни одной встроенной функции jQuery, которая сделает это за вас.   -  person DvS    schedule 16.09.2014
comment
Сначала проверьте братьев и сестер, используя метод siblings, если коллекция пуста, используйте closest.   -  person undefined    schedule 16.09.2014
comment
@undefined Вопрос заключается в том, чтобы найти наиболее близкое между предками и потомками, а не то, что существует   -  person DvS    schedule 16.09.2014
comment
Что такое this в вашем цикле? Покажи свой код.   -  person Satpal    schedule 16.09.2014
comment
@Satpal: $(this) - это элемент .reference. Мой код немного сложен и не имеет отношения к этому вопросу.   -  person Seeven    schedule 16.09.2014
comment
@undefined: я надеялся, что есть функция JQuery, чтобы избежать этого. Во всяком случае, я придумал это решение: var width = input.siblings(selector).length === 0 ? input.closest(selector).css('width') : input.siblings(selector).css('width');   -  person Seeven    schedule 16.09.2014
comment
@SeevenByakko Вы также можете определить метод, например nearest? К сожалению, у jQuery нет такого метода.   -  person undefined    schedule 16.09.2014
comment
@undefined: Да, ИМХО, это был бы полезный метод JQuery.   -  person Seeven    schedule 16.09.2014

Ответы (1)


arrow_upward
0
arrow_downward

Как насчет чего-то подобного?

var closestNextDistance = $(this).nextUntil('.wanted').length;
var closestPrevDistance = $(this).prevUntil('wanted').length;
var closestParentDistance = $(this).parentsUntil('.wanted').length;

Затем сравните расстояния, чтобы проверить, какой из них является ближайшим элементом, если родитель ближе, вызовите

$(this).closest(selector).css('width')

иначе, если один из братьев и сестер ближе, позвоните

$(this).prevAll('.wanted').css('width')

or

$(this).nextAll('.wanted').css('width')

См. http://jsfiddle.net/3z7t5gqn/.

Вам нужно будет добавить несколько проверок, чтобы увидеть, есть ли следующий ('.wanted') брат, когда nextUntil возвращает 0, но если вы превратите его в небольшую функцию, вы можете повторно использовать его.

person artm    schedule 16.09.2014