Question

我在页面上有一些产品需要从中获取Alt标记。我需要把它们变成一个对象。之后他们需要进入一个阵列。我正在考虑创建一个for循环来循环遍历Alt标签，但我不知道如何在管道'|'拆分Alt标签。我不断得到一个无效或意外的令牌。这是代码，下面是我的。在最后我有jQuery版本工作正常，但我想知道Vanilla Javascript方式。因为我想离开jQuery并学习如何在Javascript中更好地编码。

<div class="product col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12" alt="0016|AUX Cable|2.39|5m|Black|2|Tech-Aux">
        <a href="/0016/product">
            <img class="productImage" src="/static/store/images/products/download-10.jpg">
        </a>
        <a href="/0016/product">
        <h3>AUX Cable</h3>
        </a>
        <h4 class="price">£2.39</h4>
        <input type="button" class="button style_one addToCartOne" value="Add To Cart">
    </div>
<div class="product col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12" alt="0015|USB 2 Type A|3.49|10m|Black|300|Tech-Usb">
        <a href="/0015/product">
            <img class="productImage" src="/static/store/images/products/download_Jb4ucER.jpg">
        </a>
        <a href="/0015/product">
        <h3>USB 2 Type A</h3>
        </a>
        <h4 class="price">£3.49</h4>
        <input type="button" class="button style_one addToCartOne" value="Add To Cart">
    </div>

这是我的代码：

var products = document.querySelectorAll('.product');
  for(var i=0; i<products.length; i++){
  products[i].alt.split(“|”);}

感谢您的任何建议。此外，对于我将来可以看到这一点的任何帮助也会很棒。

这是有效的jQuery代码。这就是我想在Javascript中实现的目标：

var products = [];
$.each($(".product"), function(){
var prodOb = {};
var prodDetails = $(this).attr("alt").split("|");
prodOb.id = prodDetails[0];
prodOb.name = prodDetails[1];
prodOb.price = prodDetails[2];
prodOb.brand = "Some Company";
products.push(prodOb)
})
console.log(products)

Answer 1

你真的很亲密，你已经完成了人们觉得棘手的大事（使用DOM而不是jQuery来查找元素）。

两件事：

你似乎已经停在中间了。你有使用jQuery的代码来执行此操作，并且大部分代码与jQuery无关，但您还没有在尝试中使用该代码。
您正在使用花哨的引号（“”），但JavaScript需要无聊的直接上下引号（"）。

如果我们只是使用jQuery将示例中的代码复制到您已经编写的代码中并修复引号，请使用elements而不是products与数组冲突＃＆＃ 39;重新创建，使用}的合理展示位置，并添加一个或两个缺失的分号，我们得到：

var products = [];
var elements = document.querySelectorAll('.product');
for (var i = 0; i < elements.length; i++){
    var prodDetails = elements[i].getAttribute("alt").split("|");
    var prodOb = {};
    prodOb.id = prodDetails[0];
    prodOb.name = prodDetails[1];
    prodOb.price = prodDetails[2];
    prodOb.brand = "Some Company";
    products.push(prodOb);
}
console.log(products);

或者我们可以使用Array.prototype.map，但对于其中一个，它不是更简洁：

var products = Array.prototype.map.call(
    document.querySelectorAll('.product'),
    function(element) {
        var prodDetails = elements.getAttribute("alt").split("|");
        return {
            id: prodDetails[0],
            name: prodDetails[1],
            price: prodDetails[2],
            brand: "Some Company"
        };
    }
);
console.log(products);

注意：我们必须使用.getAttribute("alt")而不是.alt，因为HTML无效。 div个元素没有alt属性。我不得不承认在这个问题的第一个版本中，我没有看到HTML，并认为它是有效的，alt元素用于img元素（具有.alt财产）。

尝试在对象中拆分Alt标记，然后将其全部放入数组中

1 个答案: