Jquery Первое появление дерева обхода родителей / братьев и сестер

Question

Каков наилучший способ получить ближайший (вверх по дереву) заданный класс, но это может быть брат или родитель.

Я хочу, чтобы элемент "errors1" начинался с элемента ".start"

<div>
    ...
    <div class="errors">errors2</div>
    <div>
        .....
        <div class="errors">errors1</div>
        ...
        <div>...</div>
        <div>
            .....
            <div class="start"></div>            
        </div>     
    </div>
</div>

Сделал сценарий, но он действительно плохой и не работает вообще.

http://jsfiddle.net/9DfCJ/1/

Спасибо

EDITED: добавлено "...", чтобы улучшить динамическую структуру. Суть в том, чтобы найти ближайшее ".errors" вверх по дереву.

Answer 1

Отличный вопрос Код ниже должен работать для вас. Это зацикливается на каждого родителя .start пока не найдет элемент с .errors, Затем он предупреждает текст .errors элемент, который ближе всего к .start,

jQuery(function($){

    var $start = $('.start'),
        $parents = $start.parents();

    $parents.each(function(){
        var $this = $(this),
            $thisErrors = $this.find('.errors'),
            numErrors = $thisErrors.length;

        if(numErrors){
            alert($thisErrors.eq(numErrors-1).text());
            return false;
        }

    });

});

Answer 2

$(this).parent().siblings(':first')

Answer 3

Исследовать JQuery's prev() команда. Например, чтобы найти и скрыть предыдущие "ошибки" в контексте класса "старт", вы должны использовать следующее:

$('.start').click(function(){
  $(this).prev('.errors').hide();
});

Узнайте больше здесь: http://api.jquery.com/prev/

ОБНОВИТЬ:

Вы можете иметь больше удачи, используя parent() пройти вверх, если он сильно вложен. parent() также принимает селектор в качестве аргумента... без аргумента захватывает родителя текущего узла.

http://api.jquery.com/parent/

Answer 4

Функция, возвращающая элемент в виде объекта jQuery, чтобы его можно было повторно использовать.

Это более эффективно, чем ответ Бирана, поскольку он рассматривает только один уровень за раз, а не загружает всех родителей и каждый раз проверяет все уровни детей с помощью команды find ( http://api.jquery.com/find/).

Чтобы использовать, просто вставьте функцию в ваш файл javascript или теги сценария после загрузки jQuery.

$('.start').closestParentsAndSibling( '.errors').html('found!');

(function( $ ){
   $.fn.closestParentsAndSibling = function(search) {
        // Get the current element's siblings
        var siblings = this.siblings(search);

        if (siblings.length != 0) { // Did we get a hit?
            return siblings.eq(0);
        }

        // Traverse up another level
        var parent = this.parent();
        if (parent === undefined || parent.get(0).tagName.toLowerCase() == 'body') {
            // We reached the body tag or failed to get a parent with no result.
            // Return the empty siblings tag so as to return an empty jQuery object.
            return siblings;
        }
        // Try again
        return parent.closestParentsAndSibling(search);
   }; 
})( jQuery );

Answer 5

Я немного покопался и нашел что-то, чтобы получить первый элемент, соответствующий селектору, начиная с текущего элемента и продвигаясь вверх:

var myText = $(".start").closest($(".errors")).text(); 

Узнайте больше об этом здесь, и вы можете использовать свое событие для вызова этого кода.

Answer 6

Если вы хотите пойти вверх по дереву и получить все ошибки, вы можете сделать что-то вроде этого:

var start = $(".start"),
    current = start.parent(),
    parent = current,
    end_class = "stop",
    get_errors = function(elt) {
        return elt.children(".errors");
    },
    errors = get_errors(current)

    while (parent = current.parent()) {

        $.merge(errors, get_errors(parent));
        if (parent.hasClass(end_class)) {
           break;
        }   
        current = parent;
    }

В конце, errors будет содержать все ошибки.

Вы должны были бы добавить end_class к твоему верхнему диву.

<div class="stop">
    ...
    <div class="errors">errors2</div>
    ...
</div>