Как получить дочерний массив элемента в jquery
Вот мой элемент, я хочу устроить детей внутри, перейдя через них.
<div id="animDummy1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Вот как я думаю, что код должен выглядеть, но children(), конечно, не возвращает массив дочерних элементов
var children=$('#animDummy1').children();
for(var i=0;i<children.length;i++){
children[i].css('left',i*120+'px');
}
Вопрос - могу ли я получить массив для использования в цикле? Я знаю, что могу прикрепить функцию для каждого из дочерних элементов, которые будут выполняться, но могу ли я получить это увеличение "i" там?
Thnx.
Ответы
Ответ 1
children()
возвращает объект jQuery для дочерних элементов, который напоминает массив узлов DOM. Ваша проблема находится внутри цикла - при доступе к отдельным объектам с помощью []
вы возвращаете простые узлы DOM, у которых нет метода css
. Используйте либо .eq(i)
, либо $(children[i])
.
Или просто используйте метод each(), который позволяет делать то же самое, не заставляя писать цикл for вручную. Прочтите документы, чтобы узнать, как получить индекс элемента внутри обратного вызова.
Ответ 2
Это правильный путь.
var children=$('#animDummy1').children();
children.each(function(idx, val){
$(this).css('left',idx*120+'px');
});
или на самом деле это лучше.
$('#animDummy1').children().each(function(idx, val){
$(this).css('left',idx*120+'px');
})
Ответ 3
children()
возвращает набор объектов jQuery, а children[i(anyNumber)]
возвращает элемент dom. Поэтому вызов метода css
jQuery на элементе dom будет проходить через ошибку. Вы должны использовать метод eq
, если хотите получить доступ к любому конкретному элементу по данному индексу. Попробуйте это.
var children = $('#animDummy1').children();
for(var i = 0;i < children.length;i++){
children.eq(i).css('left', (i*120+'px') );
}
.eq()
ссылка: http://api.jquery.com/eq/
Ответ 4
Многие методы jQuery позволяют передавать функцию непосредственно вместо нового значения, которое вы хотите назначить.
Для вашего примера...
$('#animDummy1').children().css('left', function(i, curr_left) {
return i * 120;
});
Итак, я назвал .css()
непосредственно в наборе .children()
, а вместо числа для значения 'left'
я дал функцию.
Функция вызывается один раз для каждого элемента. Параметры представляют индекс текущей итерации и текущее значение css текущего элемента в итерации.
Значение return
функции будет использоваться как значение для текущего элемента.
Ответ 5
Другие ответы на использование jQuery children().each()
, вероятно, будут полезны для большинства случаев. Однако, если вам действительно нужен массив javascript, вы можете сделать следующее:
var childrenArray = $('#animDummy1').children().toArray();
Это позволит вам иметь реальный массив для использования в цикле или с другими функциями, для которых требуется массив в качестве параметра.
Ответ 6
Это отлично работает для меня
$(document).ready(function(){
var children = $('#animDummy1').children();
$(children).each(function(index, item){
console.log(index);
});
});
Пример jsFiddle
Ответ 7
$(function () {
var sortOrder = [3, 4, 1, 5,2];
var onLoad = $('#parentDiv>p').get();
for (var i = 0; i < onLoad.length; i++) {
var inRearranging = $('#parentDiv>P').get();
var orderingID = "#paragraph" + sortOrder[i];
$(orderingID).insertBefore("#" + inRearranging[i].id);
}
});
<div id="parentDiv">
<p id="paragraph1">1</p>
<p id="paragraph2">2</p>
<p id="paragraph3">3</p>
<p id="paragraph4">4</p>
<p id="paragraph5">5</p>
</div>
Ответ 8
Использовать jQuery:
.each() get позволяют каждому индексу массива с дочерними элементами $('# someObject'):
$('#animDummy1').each(function(index, item) {
// Do Something with each $(item) children of #animDummy with index
});