Добавление некоторого свойства ко всем выбранным элементам, какой из них правильный и почему?

Я пытаюсь понять правильный способ кодирования.

Мой HTML

<div id="foo">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Если я хочу добавить класс bar ко всем дочерним divs div foo, каким образом я должен использовать?

Вариант 1 (получился третий)

jQuery( '#foo > div' ).addClass( 'bar' );

Вариант 2 (получился 4-й быстрее)

jQuery( '#foo' ).children( 'div' ).addClass( 'bar' );

Вариант 3 (оказался самым быстрым)

jQuery( '#foo' ).children( 'div' ).each(function(){
    jQuery( this ).addClass( 'bar' )
});

Вариант 4 (получился очень близко 2-го)

jQuery( '#foo > div' ).each(function(){
    jQuery( this ).addClass( 'bar' )
});

Все это выполняет то, что я хочу. Мой вопрос:

Какой из них я должен использовать над другим? В каких случаях следует использовать .each?

Изменить с добавленным фрагментом, который показывает, используя каждый, лучше, чем другие методы

var t0_start = performance.now();
$('#parent > div').addClass( 'bar' );
var t0_end = performance.now();

var t1_start = performance.now();
$('#parent').children('div').addClass( 'bar' );
var t1_end = performance.now();

var t2_start = performance.now();
$( '#foo > div' ).each(function(){
    $( this ).addClass( 'bar' )
});    
var t2_end = performance.now();

var t3_start = performance.now();
$( '#foo' ).children( 'div' ).each(function(){
    $( this ).addClass( 'bar' )
});    
var t3_end = performance.now();


outcome = 'selector: ' + (t0_end - t0_start);
outcome += "\n";
outcome += 'children(): ' + (t1_end - t1_start)
outcome += "\n";
outcome += 'selector: each(): ' + (t2_end - t2_start)
outcome += "\n";
outcome += 'children(): each(): ' + (t3_end - t3_start)
alert(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"><div></div><div></div><div></div></div>

Ответ 1

ОБНОВЛЕНИЕ: Перспективные тесты, похоже, оптимизируются во время выполнения и предоставляют некоторые странные числа. Я разбил тесты на отдельные фрагменты (iframes), чтобы получить более согласованные числа.

ОБНОВЛЕНИЕ 2: Здесь jsbin, в котором я пытаюсь получить некоторое представление. Метод выбора в среднем быстрее, но накладывается. http://jsbin.com/jiluzu/edit?js,output

ОБНОВЛЕНИЕ 3: jsperf.com возвращается! Он также поддерживает "селектор" как более быстрый метод. http://jsperf.com/jq-selector-vs-children

ОРИГИНАЛ: В этом конкретном сценарии я бы использовал первый пример. Это более кратким и экономит вам дополнительный вызов функции. Кроме того, в настоящее время метод "селектор" также более эффективен.

$('# parent > div');

var start = performance.now();
$('#parent > div');
var end = performance.now();

outcome = "$('#parent > div'): " + (end - start);
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"><div></div><div></div><div></div></div>

Ответ 2

С jQuery опции 2 и 3, вероятно, очень похожи, кроме как с each() вы можете выполнять более одного действия для каждого элемента при выборе с помощью функции.

Вариант 1 - наименее эффективный в старых браузерах, таких как IE8, Chrome 5, Opera 9 со старыми версиями jQuery. Это связано с тем, что селектор CSS должен быть проанализирован перед тем, как сделать фактический выбор, который в принципе просто будет вызывать вариант 2 в любом случае.

Почему вы никогда не должны использовать селектор текста CSS

$("#parent > .child"); и $("#parent .child"); оба должны разобрать селектор, а затем просто вызвать: $('#parent').children().filter('.child') и $('#parent').filter('.child') соответственно.

Дополнительная информация, включая тесты для старых браузеров, здесь (с 2010 года).

Приведенные выше старые новости для современных браузеров и jQuery. Селекторы CSS быстрее в настоящее время.

Ответ 3

Вы можете выбрать второй вариант, потому что мы можем сделать код всеобъемлющим.

 jQuery( '#foo' ).children().addClass( 'bar' );

O/p: <div id="foo">
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
    </div>