jQuery 如何在jquery中获取元素的子数组

how to get children array of an element in jquery

提问by Martin

Heres my element, i want to arrange the children inside it by looping through them.

这是我的元素，我想通过循环来安排其中的孩子。

<div id="animDummy1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Heres how i imagine the code should look but children(), of course, doesn't return an array of the children

这就是我想象的代码应该是什么样子，但是 children()，当然不会返回一个孩子的数组

var children=$('#animDummy1').children();
for(var i=0;i<children.length;i++){
    children[i].css('left',i*120+'px');
}

The question - can i get children array for use in a loop? I know i can attach a function for each of children to be executed on, but can i get that increasing "i" in there?

问题 - 我可以让子数组在循环中使用吗？我知道我可以为每个要执行的孩子附加一个函数，但是我可以在那里得到增加的“i”吗？

Thnx.

谢谢。

回答by Matti Virkkunen

children()returns a jQuery object of the children which resembles an array of DOM nodes. Your problem is inside the loop - when you access individual objects with []you get back plain DOM nodes which don't have a cssmethod. Either use .eq(i)or $(children[i]).

children()返回一个类似于 DOM 节点数组的子元素的 jQuery 对象。您的问题出在循环内 - 当您访问单个对象时，[]您会返回没有css方法的普通 DOM 节点。使用.eq(i)或$(children[i]).

Or just use the each()method, which lets you do the same without having to write a for loop by hand. Read the docs to find out how to get the index of the element inside the callback.

或者只是使用each()方法，它让您无需手动编写 for 循环即可执行相同操作。阅读文档以了解如何获取回调中元素的索引。

回答by thenetimp

This is the correct way.

这是正确的方法。

var children=$('#animDummy1').children();

children.each(function(idx, val){
   $(this).css('left',idx*120+'px');
});

or actually this is better.

或者实际上这更好。

$('#animDummy1').children().each(function(idx, val){
   $(this).css('left',idx*120+'px');
})

回答by ShankarSangoli

children()returns a set of jQuery objects and children[i(anyNumber)]will return the dom element. So calling cssjQuery method on dom element will through an error. You should use eqmethod if you want to access any particular element at a given index. Try this.

children()返回一组 jQuery 对象children[i(anyNumber)]并将返回 dom 元素。所以css在 dom 元素上调用jQuery 方法会出错。eq如果要访问给定索引处的任何特定元素，则应使用method。尝试这个。

var children = $('#animDummy1').children();
for(var i = 0;i < children.length;i++){
    children.eq(i).css('left', (i*120+'px') );
}

.eq()reference: http://api.jquery.com/eq/

.eq()参考：http: //api.jquery.com/eq/

回答by ShankarSangoli

Many jQuery methods let you pass a function directly in place of the new value you want assigned.

许多 jQuery 方法允许您直接传递一个函数来代替您想要分配的新值。

For your example...

对于你的例子...

$('#animDummy1').children().css('left', function(i, curr_left) {
    return i * 120;
});

---

---

So here I called .css()directly on the .children()set, and instead of a number for the 'left'value, I gave a function.

所以这里我.css()直接在.children()集合上调用，而不是值的数字'left'，我给出了一个函数。

The function is invoked once for each element. The parameters represent the index of the current iteration, and the current css value of the current element in the iteration.

该函数为每个元素调用一次。参数表示当前迭代的索引，以及迭代中当前元素的当前css值。

The returnvalue of the function will be used as the value to set on the current element.

该return函数的值将用作在当前元素上设置的值。

回答by Jason

The other answers to use jQuery's children().each()are likely helpful for most cases. However, if you do need an actual javascript Array, you can do the following:

使用 jQuery 的其他答案children().each()可能对大多数情况都有帮助。但是，如果您确实需要一个实际的 javascript 数组，您可以执行以下操作：

var childrenArray = $('#animDummy1').children().toArray();

This would allow you have a real array for use in a loop or with other functions that require an array as a parameter.

这将允许您有一个真正的数组用于循环或其他需要数组作为参数的函数。

回答by Gabe

This works fine for me

这对我来说很好用

$(document).ready(function(){

    var children = $('#animDummy1').children();        

    $(children).each(function(index, item){                 
        console.log(index);            
    });           
});

jsFiddle Example

jsFiddle 示例

回答by Ivan Trubnikov

Use jQuery:

使用jQuery：

.each() get allow to each index of array with childrens of $('#someObject'):

.each() 允许使用 $('#someObject') 的孩子的数组的每个索引：

$('#animDummy1').each(function(index, item) {
   // Do Something with each $(item) children of #animDummy with index
});

回答by Nuri YILMAZ

Little touch and code is working.

很少接触和代码正在工作。

var children=$('#animDummy1').children().toArray();

var children=$('#animDummy1').children();
for(var i=0;i<children.length;i++){
    $(children[i]).css('left',i*120+'px');
}

Your code is ok except $(children[i])and define children as array with .toArray()

除了$(children[i])之外，您的代码还可以， 并使用.toArray()将 children 定义为数组

回答by Pradheep Srinivasan

    $(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>