使用jQuery检索几个DIV的ID并存储在一个数组中

Using jQuery to retrieve IDs of several DIVs and store in an array

本文关键字：存储 一个 数组 DIV 检索 jQuery 几个 使用 ID      更新时间：2023-09-26

我目前正在开发一个使用html、jQuery和PHP的"模板"创建系统。因此，界面是非常基本的，当前添加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添加到我的#templatediv中。

我在chrome中的控制台中出现错误：

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

我有点迷失了方向，希望能朝着正确的方向前进。非常感谢。

您可以（检索所有div的ID并将其存储到一个数组中）

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

您之所以出现此错误，是因为您试图使用一个名为项的变量，但该变量不存在。我想你想给一个名为item的类，在这种情况下，你应该写

class:"item",

此外，您正在将新的div附加到具有class"template"的元素中，并且您的getSteps函数正在搜索具有id的"template"的元素。

想象一下，在您的代码中，getSteps函数在DOM准备就绪时执行一次。如果你想在每次添加div时刷新id的列表，你应该在点击事件的代码中这样做：

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

$(document).ready(function() {
    $('button').on('click', function() {
        var btnID = $(this).attr('id');
        $('<div></div>', {
            text: btnID,
            id: btnID,
            class: 'item',
        }).appendTo('div.template');
        getSteps();
    });
});
相关文章：