Question

我是jQuery的新手，希望有人可以帮助我，并提供一个简短的解释，以便我将来可以将它应用于类似的案例。

我有一个动态构建的大型HTML页面。该页面包含几个表格，其中某些 div可编辑（contenteditable = true）。这些div都有类"editable"。

现在我想为包含其ID和内容（文本）的所有div 创建一个数组。

到目前为止，我有以下内容应该为这些div创建唯一ID，并且增加数字，但我不确定如何为此创建数组。另外，出于好奇，是否有一个术语如何调用这样的数组，每个项目有两个值？

我的jQuery：

$('#btnSave').on('click', function(){
    var i = 0;
    $(this).closest('form').find('div.editable').each(function(){
        $(this).attr('id', 'ed' + i+1);
        if( ($(this).text != '') && ($(this).text != ' ') ){
            $(this).addClass('edited');
        }
        i++;
    });
});

// my attempt for the array (perhaps the wrong approach):
var arrEdited = new Array();
$('div.edited').each(function(){
    arrEdited.push($.trim($(this).text()));
});

非常感谢，麦克

Answer 1

您应该使用array of objects将div id和text存储在数组中。

检查一下：

// my attempt for the array (perhaps the wrong approach):
var arrEdited = []; // [] is better than new Array()

$('div.edited').each(function () {
    // Add this div id and content in array
    arrEdited.push({
        id: $(this).attr('id'),
        text: $.trim($(this).text())
    });
});

Answer 2

您可以使用.map()创建数组。

通过函数传递当前匹配集中的每个元素，生成一个包含返回值的新jQuery对象。


由于返回值是一个包含数组的jQuery对象，因此在结果上调用.get()以使用基本数组是很常见的。

var arrEdited = $('div.edited').map(function(){
    return {
        id: this.id,
        text: $.trim($(this).text())
    }
}).get();

Answer 3

我认为你不需要另一个循环，而是可以将它放在第一个循环中，在if( ($(this).text() != '') && ($(this).text() != ' ') )内，然后将object推送到数组而不是值。

var arrEdited = new Array();
$('#btnSave').on('click', function(){
    $(this).closest('form').find('div.editable').each(function(index){
        //you could use the index when you use .each function
        $(this).attr('id', 'ed' + (index+1));
        if( ($(this).text() != '') && ($(this).text() != ' ') ){
            $(this).addClass('edited');
            //instead of using another loop, you can put your code here
            arrEdited.push({
                id: $(this).attr('id'),
                text: $.trim($(this).text())
            });
            //here you use an object, people call it array of objects
        }
    });
});

jQuery：如何为每个项创建包含两个值的数组

3 个答案: