Использование селекторов jQuery для перебора элементов DOM

Question

Может кто-нибудь сказать мне, почему это не сработает?

var top = 0;
for (divToPosition in $('.positionableDiv')) {
   divToPosition.css('top',top+'px');
   top = top + 30;
}

Answer 1

Первой причиной будет неправильное использование цикла for.

В jQuery есть идиома для циклического перебора выбранных элементов.* for ... in для лучшего понимания того, как цикл for ... in работает в javascript, он не перечисляет так же, как, скажем, .NET или Java.:

Хотя может показаться заманчивым использовать это как способ перебора массива, это плохая идея.

Answer 2

Правильный способ перебора набора подходящих элементов - .each, как уже упоминалось в других ответах. Попытка использовать цикл for..in будет выполнять итерацию по свойствам объекта jQuery, а не по соответствующим элементам.

Чтобы немного улучшить некоторые другие .each примеры, вы можете опустить переменную top, чтобы немного очистить вещи. Первый параметр .each находится в индексе элемента в наборе соответствующих элементов; Вы можете достичь того же, умножив его на 30 на каждом шаге. Нет никакого увеличивающегося и top переменных, загромождающих вещи:

$('.positionableDiv').each(function(i) {
    $(this).css('top', (i * 30) + "px");
});

Answer 3

Это будет работать:

var top = 0;
for (var pdiv in $('.positionableDiv').get()) {
   $(pdiv).css('top', top + 'px');
   top = top + 30;
}

Обычно вы используете get() для получения массива элементов.

Answer 4

«for (var key in obj)» подходит для итерации членов объекта. Он работает для собственных массивов JavaScript, если их прототип не расширен. Объект jQuery может выглядеть как собственный массив JavaScript, но это не означает, что «for (in)» завершается ошибкой.

Вы можете использовать .each для перебора объекта jQuery: var top = 0;

$('.positionableDiv').each(function() {
     $(this).css('top', top);
     top += 30;
});

Answer 5

$ ('. PositionableDiv') в вашем выражении - это объект jQuery с множеством свойств. То, что вы хотите, - это перебирать подходящие элементы, что не делается таким образом.

Попытка:

var top = 0;
$('.positionableDiv').css('top', function(index, value) {
    var cTop = top;
    top = top + 30;
    return cTop + 'px';
});