javascript - 使用 jQuery 检索多个 DIV 的 ID 并存储在数组中

Question

我目前正在使用 html、jQuery 和 PHP 开发一个"template"创建系统。所以界面非常基本，按钮当前添加 div，这些 div 将包含按钮、文本区域、复选框等内容。

当我点击一个按钮时，div 被添加；现在我还想用 jQuery 将这个新的 div ID 存储到一个数组中，同时将这个数组输出到一个 ID 为 overview 的单独的 div 中。

我当前的脚本如下所示:

function getSteps() {
        $("#template").children().each(function(){
            var kid = $(this);
            //console.log(kid.attr('id'));
            $('div.overview').append(kid.attr('id'))
        });
    }

    $('button').on('click', function() {
        var btnID = $(this).attr('id');
        $('<div></div>', {
            text: btnID,
            id: btnID,
            class: item,
        }).appendTo('div.template');
    });

    $(document).ready(function() {
        getSteps();
    });

现在，函数 getSteps 是我想要检索所有 div 的 ID 并将它们存储到数组中的地方。当我单击其中一个按钮时，我希望它们将带有 ID 的 div 添加到我的#template div 中。

我的 chrome 控制台出现错误:

Uncaught ReferenceError: item is not defined
(anonymous function)createtemplate.php:111
f.event.dispatchjquery.min.js:3
f.event.add.h.handle.i

我有点迷茫，很想朝着正确的方向前进。谢谢。

Answer 1

你可以这样做(检索所有 div 的 ID 并将它们存储到一个数组中。)

function getSteps() {
    var ids = [];
    $("#template").children().each(function(){
        ids.push(this.id);
    });
    return ids;
}

$(document).ready(function() {
   var arrayOfIds = getSteps();
});