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

Question

Есть ли лучший способ выбрать элементы прародителя в jQuery, чтобы избежать этого?

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

Спасибо.

Answer 1

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

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

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

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

Answer 2

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

Answer 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 );

Answer 4

@ У Феми был ответ, чтобы сделать это, и он упомянул рекурсию, но его решение не было рекурсивным, вот рекурсивное решение 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 ) );

чтобы получить прародителя элемента child. Вот JSFiddle

Answer 5

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