如何使用jQuery遍历div的子元素?

44u64gxh  于 2023-04-05  发布在  jQuery
关注(0)|答案(8)|浏览(180)

我有一个div,里面有几个input元素...我想遍历这些元素中的每一个。

dgjrabp2

dgjrabp21#

使用children()each(),您可以选择将选择器传递给children

$('#parentid').children('.childclass').each(function () {
    alert(this.value); // "this" is the current element in the loop
});

你也可以使用直接子选择器:

$('#mydiv > input').each(function () { /* ... */ });
vwhgwdsa

vwhgwdsa2#

也可以在特定上下文中遍历所有元素,不管它们嵌套得有多深:

$('input', $('#mydiv')).each(function () {
    console.log($(this)); //log every element found to console output
});

传递给jQuery 'input' Selector的第二个参数$('#mydiv')是上下文。在这种情况下,each()子句将遍历#mydiv容器中的所有input元素,即使它们不是#mydiv的直接子元素。

xnifntxz

xnifntxz3#

如果你需要循环遍历子元素 recursively

function recursiveEach($element){
    $element.children().each(function () {
        var $currentElement = $(this);
        // Show element
        console.info($currentElement);
        // Show events handlers of current element
        console.info($currentElement.data('events'));
        // Loop her children
        recursiveEach($currentElement);
    });
}

// Parent div
recursiveEach($("#div"));

**注意:**在这个例子中,我展示了一个对象注册的事件处理程序。

oxf4rvwz

oxf4rvwz4#

$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

这将遍历所有子元素,并且可以分别使用 elementindex 单独访问具有索引值的元素。

qeeaahzv

qeeaahzv5#

也可以这样做:

$('input', '#div').each(function () {
    console.log($(this)); //log every element found to console output
});
mwyxok5s

mwyxok5s6#

我不认为你需要使用each(),你可以使用标准的for循环

var children = $element.children().not(".pb-sortable-placeholder");
for (var i = 0; i < children.length; i++) {
    var currentChild = children.eq(i);
    // whatever logic you want
    var oldPosition = currentChild.data("position");
}

这样,您就可以在默认情况下使用标准for循环特性,如breakcontinue
debugging will be easier

alen0pnh

alen0pnh7#

children()本身就是一个循环。

$('.element').children().animate({
'opacity':'0'
});
sqxo8psd

sqxo8psd8#

它使用.attr('value ')来表示元素属性

$("#element div").each(function() {
   $(this).attr('value')
});

相关问题