Question

我有一个通过单击更新按钮来触发的功能。单击该按钮时，将捕获特定div列表中的所有元素。每个列表约有3到4个数据属性。我想在jquery或javascript中创建一个数组，其中创建的数组按某些数据属性分组。下面是我正在使用的功能

    <div>
        <ul id="listDiv" >
            <li  style="" id="id1" data-type="edit"  data-seq="1"  data-name="name1">Name1</li>
            <li  style="" id="id2" data-type="edit"  data-seq="2"  data-name="name2">Name2</li>
            <li  style="" id="id3" data-type="create"  data-seq="3"  data-name="name3">Name3</li>
        </ul>
    </div>
<a class='upBtn' > Update </a>

$('.upBtn').on('click', function(){
    var data = [];
    $('#lisDiv li').each(function() {
    var id = $(this).attr('id');
    var type = $(this).attr('data-type');
    data[type]= [];
    data[type][id] = [];
    data[type][id]['type'] = $(this).attr('data-type');   
    data[type][id]['seq'] = $(this).attr('data-sequence');   
    data[type][id]['name'] = $(this).attr('data-name');  

    });
    console.log(data);
})

我尝试尽可能多地使用push。但是我没有得到我想要的结果。我希望结果类似于下面的格式：

[edit] => [id1] => ('type') => 'edit',
                   ('seq') => 2,
                    ('name') => 'name1'
          [id2] => ('type') => 'edit',
                   ('seq') => 1,
                    ('name') => 'name2'
[create] => [id3] => ('type') => 'edit',
                   ('seq') => 3,
                    ('name') => 'name3'
          [id4] => ('type') => 'edit',
                   ('seq') => 4,
                    ('name') => 'name4

'

但是每当我尝试时，数组都不会被推送。我不确定如何在此处使用推。我们非常感谢您的帮助。

Answer 1

您需要获取对象而不是数组。

通过获取数组，您仍然可以获得属性，但是无法用console.log来查看它们，也无法对它们进行字符串化，因为数组是使用数字（正32位整数）索引进行字符串化的。

var data = {};
// ...
data[type] = data[type] || {};
data[type][id] = {};

在您的代码中，您使用了错误的标识符，它应该是listDev，并且您需要使用默认值来分配type。

$('.upBtn').on('click', function() {
    var data = {};
    $('#listDiv li').each(function() {        // listDiv spelling
        var id = $(this).attr('id'),
            type = $(this).attr('data-type');

        data[type] = data[type] || {};        // prevent overwriting the object
        data[type][id] = {
            type: $(this).attr('data-type'),
            seq: $(this).attr('data-seq'),    // seq instead of sequence
            name: $(this).attr('data-name')
        };
    });
    console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul id="listDiv">
    <li style="" id="id1" data-type="edit" data-seq="1" data-name="name1">Name1</li>
    <li style="" id="id2" data-type="edit" data-seq="2" data-name="name2">Name2</li>
    <li style="" id="id3" data-type="create" data-seq="3" data-name="name3">Name3</li>
  </ul>
</div>
<a class='upBtn'>Update</a>

如何在jquery.javascript

1 个答案: