Что лучше использовать closest, parent или parents?

@anonymous_23 · Регистрация: 26.01.2013

Студворк — интернет-сервис помощи студентам

Вопрос такой что быстрей будет работать closest или papetsы?
получается есть div.page_navigation_download > div.page_navigation_download_div > span. Меняю текст у span затем нужно вернуться в div.page_navigation_download. Понятно что можно через parent().parent() или через closest(".page_navigation_download"). НО как лучше и быстрее? Недавно задался таким вопросом в документации нет такого, решил спросить.

Vovan-VE · 28.08.2013, 10:32

«Лучше» и «быстрее» - два разных понятия из параллельных миров.

.parent().parent() - да, быстрее, но где гарантия, что уровень вложенности никогда не изменится верстальщиком?
.closest(".page_navigation_download") надежнее, хоть и не быстрее.

@Soldado · 28.08.2013, 10:45

Firebug дает Вам два удобных способа измерять эффективность JavaScript. Самый простой - вызывать console.time("timing foo") перед кодом, время выполнения которого нужно замерить, и затем console.timeEnd("timing foo") - после кода. Firebug залогирует время, которое было потрачено между вызовами.

Более техничный способ - использовать javascript профайлер. Просто вызовите console.profile() перед кодом, который Вы хотите измерить, и затем console.profileEnd(). Firebug запишет в лог детальный отчет о том, сколько времени было потрачено в каждой функции между вызовами.

источник
Запустил такой код

JavaScript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function(){
 $("span").click(function(){
    console.time("timing foo");
        $(this).parent().parent().css("background-color","red");
    console.timeEnd("timing foo");
                     
 });/*end  ready*/
 </script>

Выдало 3ms
Затем

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function(){
 $("span").click(function(){
    console.time("timing foo");//console.profile()
        $(this).closest(".page_navigation_download").css("background-color","red");
    console.timeEnd("timing foo");// console.profileEnd()   
});
                     
 });/*end  ready*/
 </script>

Выдало 2ms
Есть ещё отмена выборки end() , можно выбрать текст так как вы написали

JavaScript
1
div.page_navigation_download > div.page_navigation_download_div > span

затем сделать новый поиск родителя, а можно вернуться с помощью end() и изменить фон родителя.
Например:

JavaScript
1
$("div.page_navigation_download").children("div.page_navigation_download_div>span").text("новый").end().css("background-color","red");

@anonymous_23 · 28.08.2013, 11:04 **[ТС]**

Сообщение от Soldado

$("div.page_navigation_download").childr en("div.page_navigation_download_div>spa n").text("новый").end().css("backgrou nd-color","red");

Вот чего не знал того не знал! благодарю за ответы.

Vovan-VE · 28.08.2013, 11:05

Сообщение от Soldado

Выдало 3ms
Выдало 2ms

А какова погрешность таких измерений? Наверняка не 1ms. Т.е. разница между результатами на порядок меньше, чем погрешность. Т.е. таким измерением нельзя говорить о каком-то результате. Нужны многократные замеры на длительном промежутке времени.
Также в замер попали лишние действия: $(this) и .css() . Нужно по максимум выкинуть все лишнее «за скобку».

Скажем, тупо-цикл: http://jsfiddle.net/exJWz/1/

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("span").click(function(){
    var that = $(this);
 
    console.time("timing .parent().parent()");
    for (var i = 500000; i > 0; --i) {
        that.parent().parent();
    };
    console.timeEnd("timing .parent().parent()");
 
    console.time("timing .closest()");
    for (var i = 500000; i > 0; --i) {
        that.closest('.page_navigation_download');
    };
    console.timeEnd("timing .closest()");
});

У меня получилось 25.414 сек для .parent().parent() и 57.420 сек для .closest() .
Разница в 2 с коппейками раза.
Но если разделить обратно на 500к итераций, то 0.05 мсек против 0.11 мсек - это же смех просто.

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@anonymous_23 27 / 27 / 10 Регистрация: 26.01.2013 Сообщений: 231

	Что лучше использовать closest, parent или parents? 28.08.2013, 09:26. Показов 3317. Ответов 4 Метки нет (Все метки) Вопрос такой что быстрей будет работать closest или papetsы? получается есть div.page_navigation_download > div.page_navigation_download_div > span. Меняю текст у span затем нужно вернуться в div.page_navigation_download. Понятно что можно через parent().parent() или через closest(".page_navigation_download"). НО как лучше и быстрее? Недавно задался таким вопросом в документации нет такого, решил спросить. 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	28.08.2013, 10:32
	«Лучше» и «быстрее» - два разных понятия из параллельных миров. .parent().parent() - да, быстрее, но где гарантия, что уровень вложенности никогда не изменится верстальщиком? .closest(".page_navigation_download") надежнее, хоть и не быстрее. 1