Question

我有一个这样的列表：

<li class='category parent-category' data-categoryId='1' data-parentCategoryId='' data-parentOrder='1'>
    <a href='/category/edit/1'>Business Basics</a>
</li>

<li class='category parent-category' data-categoryId='10' data-parentCategoryId='1' data-parentOrder='2'>
    <a href='/category/edit/10'>General/Legal</a>
</li>

<li class='category parent-category' data-categoryId='15' data-parentCategoryId='2' data-parentOrder='3'>
    <a href='/category/edit/15'>Home, Help &amp; Links</a>
</li>

我想遍历类'category'的每个元素，获取数据属性，然后将它们插入数组。

var categoryData = Object.create(null);
var myArray = [];

$('.category').each(function() {
    categoryData.categoryId = category.attr('data-categoryId');
    categoryData.parentCategoryId = category.attr('data-parentCategoryId');
    categoryData.childOrder = category.attr('data-child-order');
    categoryData.parentOrder = category.attr('data-parent-order');

    myArray.push(categoryData);
});

但是目前，它仅从第一个元素中获取数据，然后多次将其插入到数组中。

[ 
    0 => [ categoryId => 1, parentCategoryId => , childOrder => , parentOrder => 1 ], 
    1 => [ categoryId => 1, parentCategoryId => , childOrder => , parentOrder => 1 ], 
    2 => [ categoryId => 1, parentCategoryId => , childOrder => , parentOrder => 1 ]
]

我想要的是：

[ 
    0 => [ categoryId => 1, parentCategoryId => , childOrder => , parentOrder => 1 ], 
    1 => [ categoryId => 10, parentCategoryId => 1, childOrder => , parentOrder => 2 ], 
    2 => [ categoryId => 15, parentCategoryId => 2, childOrder => , parentOrder => 3 ]
]

Answer 1

var myArray = [];

$('.category').each(function() {
  var categoryId = $(this).attr('data-categoryId');
  var parentCategoryId = $(this).attr('data-parentCategoryId');
  var childOrder = $(this).attr('data-child-order');
  var parentOrder = $(this).attr('data-parent-order');

  myArray.push({categoryId , parentCategoryId ,childOrder,parentOrder  });
})

这可能有效

Answer 2

对象是reference types。

在循环中，您仅设置同一对象categoryData的属性，而不创建新的对象。

因此，最后，您的数组在每个索引处都包含对同一对象的多个引用。这就是为什么在结果数组的每个元素上看到相同值（最后一个category元素的值）的原因。

解决方案是为循环中的每个类别元素创建对象

$('.category').each(function() { const data = { categoryId: category.attr('data-categoryId'), parentCategoryId: category.attr('data-parentCategoryId'), childOrder: category.attr('data-child-order'); parentOrder: category.attr('data-parent-order') }; myArray.push(data); });

Answer 3

还需要将参考更改为类别

var myArray = [];

$('.category').each(function() {
    let categoryData = Object.create(null);
    categoryData.categoryId = $(this).attr('data-categoryId');
    categoryData.parentCategoryId = $(this).attr('data-parentCategoryId');
    categoryData.childOrder = $(this).attr('data-child-order');
    categoryData.parentOrder = $(this).attr('data-parent-order');

    myArray.push(categoryData);
});

console.log(myArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class='category parent-category' data-categoryId='1' data-parentCategoryId='' data-parentOrder='1'>
    <a href='/category/edit/1'>Business Basics</a>
</li>

<li class='category parent-category' data-categoryId='10' data-parentCategoryId='1' data-parentOrder='2'>
    <a href='/category/edit/10'>General/Legal</a>
</li>

<li class='category parent-category' data-categoryId='15' data-parentCategoryId='2' data-parentOrder='3'>
    <a href='/category/edit/15'>Home, Help &amp; Links</a>
</li>

Answer 4

您每次需要推一个新对象：）

$('.category').each(function() {
    myArray.push({
        categoryId: category.attr('data-categoryId'),
        parentCategoryId: category.attr('data-parentCategoryId'),
        childOrder: category.attr('data-child-order'),
        parentOrder: category.attr('data-parent-order'),
    });
});

Answer 5

以下代码将为您排序：

var myArray = [];

$('.category').each(function() {
    let categoryData = Object.create(null);
    categoryData.categoryId = $(this).attr('data-categoryId');
    categoryData.parentCategoryId = $(this).attr('data-parentCategoryId');
    categoryData.childOrder = $(this).attr('data-child-order');
    categoryData.parentOrder = $(this).attr('data-parentOrder');
    myArray.push(categoryData);
});
console.log(myArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<li class='category parent-category' data-categoryId='1' data-parentCategoryId='' data-parentOrder='1'>
    <a href='/category/edit/1'>Business Basics</a>
</li>

<li class='category parent-category' data-categoryId='10' data-parentCategoryId='1' data-parentOrder='2'>
    <a href='/category/edit/10'>General/Legal</a>
</li>

<li class='category parent-category' data-categoryId='15' data-parentCategoryId='2' data-parentOrder='3'>
    <a href='/category/edit/15'>Home, Help &amp; Links</a>
</li>

只需确保在您的html中插入“ childOrder”，否则结果将继续显示“ undefined”。

遍历列表并插入对象数组

5 个答案: