Question

我有一个div，它有几个输入元素......我想遍历每个元素。想法？

Answer 1

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

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

您也可以使用直接子选择器：

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

Answer 2

也可以迭代特定上下文中的所有元素，没有matter它们的嵌套程度如何：

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

第二个参数$（＆＃39; #mydiv＆＃39;）传递给jQuery＆＃39;输入＆＃39;选择器是上下文。在这种情况下，each（）子句将遍历#mydiv容器中的所有输入元素，即使它们不是#mydiv的直接子元素。

Answer 3

如果您需要递归遍历子元素：

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"));

注意：在此示例中，我显示了使用对象注册的事件处理程序。

Answer 4

也可以这样做。
$('input', '#div').each(function () { console.log($(this)); //log every element found to console output });

Answer 5

children（）本身就是一个循环。

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

Answer 6

我认为您不需要使用each()，可以使用标准的循环

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");
}

这样，您可以拥有break和continue这样的默认循环功能

还有debugging will be easier

Answer 7

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

此操作遍历所有子项，并且可以分别使用 element 和 index 分别访问具有索引值的元素。

Answer 8

它与 .attr('value') 一起工作，用于元素属性

2021-05-03T13:57:30.565Z [WARNING]: - Initializing your environment: dev
2021-05-03T13:57:30.874Z [WARNING]: ✔ Initialized provider successfully.
2021-05-03T13:57:30.998Z [WARNING]: ✖ An error occurred when pushing the resources to the cloud
2021-05-03T13:57:30.998Z [WARNING]: ✖ There was an error initializing your environment.
2021-05-03T13:57:31.001Z [INFO]: [0mTypeError: Cannot read property 'length' of undefined[0m
                                 [0m    at /root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/utils/consolidate-apigw-policies.ts:121:99[0m
                                 [0m    at Array.forEach (<anonymous>)[0m
                                 [0m    at ApiGatewayAuthStack.createPoliciesFromResources (/root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/utils/consolidate-apigw-policies.ts:120:13)[0m
                                 [0m    at /root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/utils/consolidate-apigw-policies.ts:94:16[0m
                                 [0m    at Array.forEach (<anonymous>)[0m
                                 [0m    at /root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/utils/consolidate-apigw-policies.ts:84:31[0m
                                 [0m    at Array.forEach (<anonymous>)[0m
                                 [0m    at new ApiGatewayAuthStack (/root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/utils/consolidate-apigw-policies.ts:62:23)[0m
                                 [0m    at createApiGatewayAuthResources (/root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/utils/consolidate-apigw-policies.ts:205:17)[0m
                                 [0m    at Object.consolidateApiGatewayPolicies (/root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/utils/consolidate-apigw-policies.ts:201:10)[0m
                                 [0m    at Object.createEnvLevelConstructs (/root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/utils/env-level-constructs.ts:22:5)[0m
                                 [0m    at processTicksAndRejections (internal/process/task_queues.js:97:5)[0m
                                 [0m    at Object.run (/root/.nvm/versions/node/v12.21.0/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/push-resources.ts:97:5)[0m
2021-05-03T13:57:31.018Z [ERROR]: !!! Build failed
2021-05-03T13:57:31.019Z [ERROR]: !!! Non-Zero Exit Code detected
2021-05-03T13:57:31.019Z [INFO]: # Starting environment caching...
2021-05-03T13:57:31.019Z [INFO]: # Uploading environment cache artifact...
2021-05-03T13:57:31.100Z [INFO]: # Environment caching completed

如何使用jQuery迭代div的子元素？

8 个答案: