[英]How to iterate over children with for-loop
I want to iterate over all childs of a jQuery's .children()
return value, like this: 我想迭代jQuery的.children()
返回值的所有子节点,如下所示:
var childs = $element.children();
for (var i = 1; i < childs.length - 1; i++)
childs__.foo();
What do I have to write in the 3 line instead of __
, to access the i-th child? 为了访问第i个孩子,我需要在3行而不是__
写什么?
I want this becaus I want to access the (i-1)-th and (i+1)-th child in the loop, like this: 我想要这个因为我想要在循环中访问第(i-1)个和第(i + 1)个孩子,如下所示:
var childs = $element.children();
for (var i = 1; i < childs.length - 1; i++)
{
childs<<i>>.css('height', childs<<i - 1>>.height());
childs<<i>>.css('width', childs<<i + 1>>.width());
}
So I assume the each()
function will not work. 所以我假设each()
函数不起作用。
childs
is a javascript array . childs
是一个javascript数组 。 So you access objects within the array by childs[indexOfElement]
. 因此,您可以通过childs[indexOfElement]
访问数组中的对象。 In your case childs[i]
. 在你的情况下childs[i]
。
var childs = $element.children();
for (var i = 1; i < childs.length - 1; i++)
childs[i].foo();
and 和
var childs = $element.children();
for (var i = 1; i < childs.length - 1; i++)
{
childs[i].css('height', childs[i-1].height());
childs[i].css('width', childs[i+1].width());
}
BUT : Your code has an error. 但是 :您的代码有错误。 The element from the children collection is NOT a jQuery object. children集合中的元素不是jQuery对象。 It's just an DOM element. 它只是一个DOM元素。 So you have to wrap them in $(...)
to use jQuery functions. 所以你必须将它们包装在$(...)
以使用jQuery函数。 So your code will become: 所以你的代码将成为:
var childs = $element.children();
for (var i = 1; i < childs.length - 1; i++)
{
var thisElement = $(childs[i]);
var next = $(childs[i+1]);
var prev = $(childs[i-1]);
thisElement.css('height', prev.height());
thisElement.css('width', next.width());
}
PS. PS。 It should be named children
. 它应该被命名为children
。 :) :)
使用这个选择器http://api.jquery.com/nth-child-selector/会不会更容易?
You could use the each() function, and use "this" to get the current object. 您可以使用each()函数,并使用“this”来获取当前对象。 Then you can use the next() and prev() functions instead of i+1 and i-1 respectively. 然后你可以分别使用next()和prev()函数代替i + 1和i-1。 I haven't tested the code so it may or may not work; 我没有测试过代码,所以它可能会或可能不会工作; hopefully points in the right direction :) 希望指向正确的方向:)
jQuery.each($element.children(), function() {
{
$(this).css('height', $(this).prev().height());
$(this).css('width', $(this).next().width());
}
The each()
function will work, take a look at this: each()
函数将起作用,看看这个:
$('#something').children().each(function(index) {
$(this).css('width', (parseInt($(this).css('width').replace('px', '')) + index) + "px");
// to access the previous and next element:
$(this).prev().css('width', '100px');
$(this).next().css('width', '200px');
});
That will modify the width, adding the index as a pixel on each iteration - just to demo how to get the index. 这将修改宽度,在每次迭代时将索引添加为像素 - 只是为了演示如何获取索引。
Use .eq() to get the one at the specified index of the matched dom elements set. 使用.eq()获取匹配的dom元素集的指定索引处的那个。
var childs = $element.children();
for (var i = 1; i < childs.length - 1; i++)
{
childs.eq(i).css('height', childs.eq(i - 1).height());
childs.eq(i).css('width', childs.eq(i + 1).width());
}
and the another simple approach is to achieve this without for loop use .each() 另一个简单的方法是在没有循环使用的情况下实现这个.each()
jQuery.each($element.children(), function() {
{
$(this).css('height', this.prev().height());
$(this).css('width', this.next().width());
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.