Javascript и JQuery толчок массив объект на основе пользовательского атрибута

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 в качестве его свойства и соответствующим текстом, переданным в массив.

код So Far

Я использую следующий код, но массив передается состоит из всего текста с размаху

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 скрипку

Вот JSFiddle же - http://jsfiddle.net/illuminatus/0g0uau4v/2/

бы признателен за любую помощь!

Answer 1

При использовании 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 2

Вы не можете использовать тот же массив, что и значение для каждого столбца. Вместо этого создайте новый массив каждый раз, когда вы сталкиваетесь новый столбец, или просто добавить значение к существующему массиву, если column-name уже существует:

$(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)); 
 
});

<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>

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