如何在jquery中获取子元素的数组
inheritance我的元素,我想通过循环它们来安排孩子们。
下面我想象代码看起来如何,但是当然,children()不会返回一个孩子的数组
var children=$('#animDummy1').children(); for(var i=0;i<children.length;i++){ children[i].css('left',i*120+'px'); }
问题 – 我可以让子数组在循环中使用吗? 我知道我可以为每个要执行的孩子附加一个函数,但是我可以在那里增加“i”吗?
日Thnx。
children()
返回子节点的jQuery对象,类似于DOM节点数组。 你的问题在循环中 – 当你使用[]
访问单个对象时,你会得到没有css
方法的普通DOM节点。 使用.eq(i)
或$(children[i])
。
或者只使用each()方法,这样您就可以不必手动编写for循环。 阅读文档以了解如何获取回调内元素的索引。
这是正确的方法。
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'); })
children()
返回一组jQuery对象, children[i(anyNumber)]
将返回dom元素。 所以在dom元素上调用css
jQuery方法将会出错。 如果要访问给定索引处的任何特定元素,则应使用eq
方法。 试试这个。
var children = $('#animDummy1').children(); for(var i = 0;i < children.length;i++){ children.eq(i).css('left', (i*120+'px') ); }
.eq()
参考: http : .eq()
许多jQuery方法允许您直接传递函数来代替您想要分配的新值。
以你为榜样……
$('#animDummy1').children().css('left', function(i, curr_left) { return i * 120; });
所以在这里我直接在.children()
集上调用.css()
,而不是'left'
值的数字,我给了一个函数。
为每个元素调用一次该函数。 参数表示当前迭代的索引,以及迭代中当前元素的当前css值。
函数的return
值将用作在当前元素上设置的值。
其他答案使用jQuery的children().each()
可能对大多数情况有帮助。 但是,如果确实需要实际的javascript数组,则可以执行以下操作:
var childrenArray = $('#animDummy1').children().toArray();
这将允许您有一个真正的数组用于循环或其他需要数组作为参数的函数。
这对我来说很好
$(document).ready(function(){ var children = $('#animDummy1').children(); $(children).each(function(index, item){ console.log(index); }); });
jsFiddle示例
$(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); } }); 1
2
3
4
5
使用jQuery:
.each()得到允许带有子元素$(’#someObject’)的数组的每个索引:
$('#animDummy1').each(function(index, item) { // Do Something with each $(item) children of #animDummy with index });
一点点触摸和代码工作。
var children=$('#animDummy1').children().toArray(); var children=$('#animDummy1').children(); for(var i=0;i
您的代码没有问题,除了$(children [i])并使用.toArray()将子节点定义为数组