用JavaScript推入數組的JSON元素

Question

我正在尋找訪問HTML元素的數據（JSON記錄）並將其推入JavaScript中的數組。

的HTML是：

<td class="card-holder" data-card="{"id":0,"type":"Wildcard","image":"wildcard.png","strength":0,"type_image":"wildcard.png","region_owned_adder":0}"> 
     <img id="card-image-0" src="/img/wildcard.png" class="card-exchange"> 
     <input class="cards-checkbox" type="checkbox" id="card-0" name="cards_to_exchange[]" value="id=" 0""=""> 
     <label for="cards_to_exchange"></label> 
</td> 

我有我的網頁上其中的一些。我在一個循環中讀取每選擇一些推到一個這樣的數組：

var cards = []; 
$('.card-exchange').each(function() { 
    if ($(this).find('input[name="cards_to_exchange[]"]').is(':checked')) { 
     var parseCard = JSON.parse(thisElement.data('card')); 
     cards.push(parseCard); 
    } 
}); 

但這正顯示出我[]循環後：

console.log(cards); 

顯示了數據OK：

console.log(thisElement.data('card')); 

如何讀取字符串並將其作爲對象推入數組？謝謝。

Answer 1

您在<img>上使用.find()，它沒有後代。

使用.next()來代替它的<input>兄弟姐妹。

---

此外，您還可以使用.filter()然後.map()把它清理乾淨一點。

var cards = $('.card-exchange').filter(function() { 
    return $(this).next().is(':checked'); 
}).map(function() { 
    return JSON.parse(thisElement.data('card')); 
}).toArray(); 

儘管我不確定thisElement指的是什麼。

---

你甚至可以縮短一點。

var cards = $('.card-exchange + input:checked') 
    .prev() 
    .map(function() { 
    return JSON.parse(thisElement.data('card')); 
    });