如何將這些 HTML 屬性添加到 JavaScript object？

Question

我在 div 中有一個屬性列表，我想將其放入 object -

<div class="d-none product-data">
    <div class="product" product-name="English-One" translated-name="Translated-One"></div>
    <div class="product" product-name="English-Two" translated-name="Translated-Two"></div>
</div>

所以我遍歷了.product-data.product 並添加了這樣的每個屬性 -

$('.product-data .product').each(function () {
        translatedProducts = {
            "product": {
                "en": $(this).attr('product-name'),
                "tr": $(this).attr('translated-name')
            }
        }
});

但是，當我 console.log(translatedProducts) 我得到倍數時，它只添加了 English-Two -

Object { product: {…} }
product: Object { en: "English-Two", tr: "Translated-Two" }
en: "English-Two"
tr: "Translated-Two"

如何編寫此代碼以便循環遍歷每個 div 並將產品名稱和翻譯名稱屬性添加到我的 object？

Answer 1

您正在覆蓋相同的 object。 對象不能有相同的鍵，所以后者會覆蓋前者。：

 { product:{}, product:{} } /* => */ { product: {} }

看起來好像您希望將對象放入更大的 object 中。 如果你想要兩個對象，把它們放在一個數組中：

 { products: [ {}, {} ] };

此外，您應該使用data-*屬性，自定義鍵就是它們的用途。

 let products = []; let translatedProducts = {}; $('.product').each(function(i) { let product = {}; product.en = $(this).data('product'); product.tr = $(this).data('translated'); products.push(product); }); translatedProducts.products = products; console.log(translatedProducts);

 <div class="d-none product-data"> <div class="product" data-product="English-One" data-translated="Translated-One"></div> <div class="product" data-product="English-Two" data-translated="Translated-Two"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

使用一個數組並將每組單獨的值推送給它

var translatedProducts = [];
$('.product-data .product').each(function () {
        translatedProducts.push( {
            "product": {
                "en": $(this).attr('product-name'),
                "tr": $(this).attr('translated-name')
            }
        });
});