JQuery: выбор дедушек и бабушек

Ответ 1

Вы можете использовать метод parents(), который соответствует родителям против селектора

http://api.jquery.com/parents/

Или, если вы используете 1.4, существует новый метод parentsUntil()

http://api.jquery.com/parentsUntil/

Ответ 2

В дополнение к parents(), как они сказали, вы также должны проверить closest(). Прочтите сравнение в документации там, но его основные отличия заключаются в том, что он ищет только один результат и включает $(this) в то, что он ищет (может получить то, что вы ищете, если вы недостаточно конкретны). Плюсы и минусы.

Ответ 3

Я написал этот простой плагин, потому что думал, что у меня был однозначный выбор класса, где-то давал мне ошибки. Выбор дедушки и бабушки казался более прямым, чем $().parents() для данного конкретного случая.

Хорошо, я использовал это однажды, тогда понял, что у меня на самом деле была орфографическая ошибка. Не уверен, насколько это полезно. $('myelem').gparent(2); доставит вам дедушку "myelem".

(function( $ ){
$.fn.gparent = function( recursion ){
    if( recursion == undefined ) recursion = 2;
    if(typeof(recursion) == "number"){
        recursion = parseInt( recursion );
        if( recursion > 0 ){
            gparent_holder = $(this);
            for(var gparent_i = 0; gparent_i < recursion; gparent_i++){
                gparent_holder = gparent_holder.parent();
            }
            return gparent_holder;
        }
        else return false;
    }
    else return false;
}
})( jQuery );

Ответ 4

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

Ответ 5

@Femi получил ответ, чтобы сделать это, и упомянул рекурсию, но его решение не было рекурсивным, здесь рекурсивное решение jQuery для получения предков элемента:

$.fn.gparent = function( recursion ){
   console.log( 'recursion: ' + recursion );
   if( recursion > 1 ) return $(this).parent().gparent( recursion - 1 );
   return $(this).parent();
};

Если это ваш HTML:

<div id='grandparent'>
  <div id='parent'>
    <div id='child'>
      child
    </div>
  </div>
</div>

Вы можете позвонить

console.log( $('#child').gparent( 2 ) );

чтобы получить grandparent элемента child. Здесь JSFiddle

Ответ 6

Использование parents() и children() дает одинаковые результаты.

Пример вместо использования этого:

$(this).parent().parent().parent().children(".title").fadeIn("fast");

Вы можете использовать это:

$(this).parents().children(".title").fadeIn("fast");