Самый быстрый и эффективный способ найти родительский элемент

Question

Я уже давно использую этот метод, изначально не проводя никаких исследований.

$("div#panel-frame div.panel.txt select.fontsize").live('change', function ()
            {
                var parent = $(this).parents('div.panel.txt');
});

Итак, как вы можете видеть из приведенного выше кода, я пытаюсь получить доступ к родителю select.fontsize. Родитель, к которому я пытаюсь добраться, это div.panel.txt - как вы видите, я обращаюсь к нему, говоря: $ (this) .parents ('div.panel.txt')

Этот метод работает, но мне интересно, есть ли лучший способ сделать это? В идеале я хочу, чтобы он был максимально быстрым и эффективным.

Answer 1

Если это истинный родительский (т. Е. Следующий предок) элемент, который вы ищете, этого должно быть достаточно:

var parent = $(this.parentNode); // is faster than $(this).parent();

Если вам нужен только родитель, если он совпадает с селектором, то он сделает свое дело:

var parent = $(this).parent('div.panel.txt');
if ( parent[0] ) {
   ...

Однако, если вам нужен элемент предка , вы, вероятно, захотите использовать метод .closest():

var parent = $(this).closest('div.panel.txt');

, который поднимается по дереву домина и останавливается у первого предка, соответствующего селектору.

Answer 2

То, что у вас есть внутри вашей функции изменения, должно быть достаточно эффективным, хотя, если вы знаете, что элемент, который вы хотите, является прямым родителем , вам следует использовать .parent () вместо .parents (). Как уже говорили другие люди, если вы не знаете, является ли он прямым родителем, используйте .closest () вместо .parents ().

Теоретически, вы можете использовать this.parentNode, чтобы получить родителя - независимо от его имени узла или класса - с собственным обходом DOM (то есть без использования jQuery), и это может быть немного быстрее. Тем не менее, вам нужно будет написать свои собственные проверки, чтобы убедиться, что имена узлов и классов совпадают, поэтому любые ваши выгоды, вероятно, будут снова потеряны. Это в основном то, что jQuery делает в любом случае, и jQuery уже очень сильно оптимизирован.

Ваш .live селектор $("div#panel-frame div.panel.txt select.fontsize"), вероятно, больше беспокоит с точки зрения скорости. .live() работает, назначая событие элементу тела, а затем наблюдая за целями событий, когда они всплывают. Поэтому, когда какое-либо событие «изменения» попадает в тело, jQuery должен проверить, возникло ли оно при чем-то, совпадающем с 'div#panel-frame div.panel.txt select.fontsize', что является очень медленной операцией, особенно в старых браузерах.

Вероятно, было бы быстрее просто связать .live() с $ ('select.fontsize'), а затем проверить, является ли элемент select именно тем типом, который вам нужен в самом обработчике событий. Таким образом, jQuery может использовать встроенную в браузер функцию getElementsByTagName, которая является быстрой операцией. А еще лучше, дайте вашим select.fontsize элементам более конкретное имя класса, чтобы вы заранее знали, что они вам нужны.

Answer 3

Самый быстрый или "самый правильный?"Используйте ближайший вместо parents, если вам нужен только первый такой предок.

Answer 4

Если вы ищете только одного предка, вы можете использовать .closest(), чтобы найти его..parents() найдет всех предков, соответствующих селектору.