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

Может кто-нибудь сказать мне, почему это не сработает?Использование селекторов jQuery для итерации через элементы DOM

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

источник

2010-11-18 Yarin

Что он делает (или не делает)? –

Никогда не заходит в петлю – Yarin

Первой причиной было бы неправильное использование петли for.

JQuery имеет идиомы для цикла по выбранным элементам ..

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

Пожалуйста, обратите внимание на for...in для лучшего понимания образом для ... в цикл работает в JavaScript, он не перечисляет так же, как сказать .NET или Java.

Из статьи:

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

источник

2010-11-18 15:49:12

спасибо за указание на мое неправильное использование цикла javascript, вы только что сбили мне немного вреда – Yarin

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

Попытка:

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

источник

2010-11-18 15:50:20 Orbling

Как утверждает Квинтин, использование метода .each() - это более общий способ итерации по коллекции совпадающих элементы. Метод .css() предоставляет способ обработки с помощью функции обратного вызова напрямую, поэтому я продемонстрировал это, как указано выше. Вероятно, в этом случае немного менее понятно, из-за того, что переменная в игре устанавливается после того, как значение нужно вернуть. – Orbling

Я ценю альтернативу, которую вы предоставили, всегда хорошо знать все варианты. Спасибо – Yarin

@Yarin Какой метод является более подходящим, зависит от ситуации. jQuery отличается тем, что делает код кратким и понятным, поэтому приятно видеть ряд аналогичных, но альтернативных методов. – Orbling

"За (вар ключ в OBJ)" подходит для перебора членов объекта. Он работает для собственных JavaScript-массивов, пока их прототип не расширен. Объект jQuery может выглядеть как собственный массив JavaScript, но это не значит, что «for (in)» терпит неудачу.

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

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

источник

2010-11-18 15:52:48

Кроме того, даже если это был массив, вы не хотели бы использовать for-in, как указывает @Quintin ... и я только что узнал – Yarin

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

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

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

источник

2010-11-18 15:59:25 meagar

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

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

В принципе, можно использовать get() для получения массива элементов.

источник

2010-11-18 16:00:05

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

ответ

Смежные вопросы