Question

问题

有几个带有类的HTML标记如下

<span class="keyword" column-name="Product Group">Outdoors</span>
<span class="keyword" column-name="Material Code">10001003</span>
<span class="keyword" column-name="Material Code">10001000</span>

需要迭代所有span并创建一个新对象，其中column-name属性作为其属性，相关文本传递给数组。

代码到目前为止

我使用下面的代码，但传递的数组包含span

中的所有文本

var searchCriteria = {};
var keyword = [];
$('.keyword').each(function(index, elem) {
    col = $(elem).attr('column-name');
    keyword.push($(elem).text());
    searchCriteria[col] = (keyword);
});
console.log(searchCriteria);

上面的代码将对象准备为

{
    Material Code: ['Outdoors', '10001003', '10001000']
    Product Group: ['Outdoors', '10001003', '10001000']
}

预期结果

我期待的对象的结果是

{
    Material Code: ['10001003', '10001000']
    Product Group: ['Outdoors']
}

JS Fiddle

这是一个相同的JSFiddle - http://jsfiddle.net/illuminatus/0g0uau4v/2/

非常感谢任何帮助！

Answer 1

您不能使用与每列相同的数组。相反，每次遇到新列时都要创建一个新数组，或者只是在column-name已存在的情况下将值附加到现有数组：

＆＃13;

$(function() {
    var searchCriteria = {};
    $('.keyword').each(function(index, elem) {
        var col = $(elem).attr('column-name');
        var keyword = searchCriteria[col] ? searchCriteria[col] : [];
        keyword.push($(elem).text());
        searchCriteria[col] = (keyword);
    });
    $("#result").text("Result: " + JSON.stringify(searchCriteria));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="keyword" column-name="Product Group">Outdoors</span>
<span class="keyword" column-name="Material Code">10001003</span>
<span class="keyword" column-name="Material Code">10001000</span>
<div id="result"></div>

＆＃13;

Answer 2

使用searchCriteria[col] = (keyword);时，它不会复制关键字数组。它只存储指向该数组的指针。因此，如果在将关键字分配给某个变量后更新它，它也会更新，因为它们都指向同一个数组。如果要复制数组，可以在数组上使用.slice()。但这里不需要它。

使用以下代码

var searchCriteria = {};
$('.keyword').each(function(index, elem) {
    col = $(elem).attr('column-name');
    if ( !Array.isArray(searchCriteria[col]) )
        searchCriteria[col] = [];
    searchCriteria[col].push($(elem).text());
});
console.log(searchCriteria);

http://jsfiddle.net/0g0uau4v/3/

Answer 3

你可以这样做

var searchCriteria = {};
$('.keyword').each(function(){
   var key = $(this).attr("column-name");
   var value = $('[column-name='+key+']').map(function(){return $(this).text()}).get();
   if(!searchCriteria.hasOwnProperty(key)) searchCriteria[key] = value;
});

Answer 4

那是becoz，你为所有人使用了相同的更新阵列。

var searchCriteria = {};
var keyword = [];
$('.keyword').each(function(index, elem) {
    col = $(elem).attr('column-name');
    if( !searchCriteria[col])
         searchCriteria[col] = [];
    searchCriteria[col].push($(elem).text());
});
console.log(searchCriteria);

此代码在此代码中搜索，如果属性不存在。然后将该索引作为数组。还有你推动元素。

Working fiddle

Javascript＆amp; jQuery将数组推送到基于自定义属性的对象

4 个答案: