Как получить дочерний массив элемента в 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
});