Question

我手边有一段简单的代码

HTML

<table cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        <th scope="row">Quantity</th>
        <th id="js-QuantityID-1" scope="col">1</th>
        <th id="js-QuantityID-2" scope="col">2</th>
        <th id="js-QuantityID-3" scope="col">3</th>
        <th id="js-QuantityID-4" scope="col">4</th>
        <th id="js-QuantityID-5" scope="col">5</th>
        <th id="js-QuantityID-6" scope="col">10</th>
        <th id="js-QuantityID-7" scope="col">15</th>
        <th id="js-QuantityID-8" scope="col">20</th>
        <th id="js-QuantityID-9" scope="col">30</th>
        <th id="js-QuantityID-10" scope="col">40</th>
        <th id="js-QuantityID-11" scope="col">100</th>
    </tr>
    <tr>
        <th scope="row">Price (inc. VAT)</th>
        <td id="js-PriceID-1">£45.60</td>
        <td id="js-PriceID-2">£76.80</td>
        <td id="js-PriceID-3">£97.20</td>
        <td id="js-PriceID-4">£128.40</td>
        <td id="js-PriceID-5">£172.80</td>
        <td id="js-PriceID-6">£307.20</td>
        <td id="js-PriceID-7">£402.00</td>
        <td id="js-PriceID-8">£432.00</td>
        <td id="js-PriceID-9">£630.00</td>
        <td id="js-PriceID-10">£840.00</td>
        <td id="js-PriceID-11">£2100.00</td>
    </tr>
    </tbody>
</table>

的Javascript

function getTableContents() {
    var productArray = [];

    for (var x = 0; x <= 12; x++) {
        productArray.push({ Price: $('#js-PriceID-' + x).text(), Qty: $('#js-QuantityID-' + x).text() });
    }

    console.log("Array: " + productArray);    
}

但是在执行此代码的最后，我最终得到了一个包含两个属性“undefined”的数组。如果我手动输入选择器ID它工作正常，它似乎与for循环并在运行时获取值。

为什么会这样，是否有解决方法？

Answer 1

循环中的第一项是0，最后一项是12.这就是原因。

按如下方式尝试循环：

for (var x=1; x<=11; x++)

Answer 2

循环从0开始直到12，因此它会查找js-PriceID-0和js-PriceID-12，两者都不存在。 js-QuantityID-0和js-QuantityID-12同样如此。

请改用：

for (var x = 1; x < 12; x++) {
    productArray.push({ Price: $('#js-PriceID-' + x).text(), Qty: $('#js-QuantityID-' + x).text() });
}

为了节省一些时间，你也可以这样做：

function getTableContents() {
    var productArray = [];

    // loop through all elements with an id that starts with "js-QuantityID-"
    $("th[id^='js-QuantityID-']").each(function () {    
        var n = $(this).attr("id").replace('js-QuantityID-',''); // get the number from the id

        productArray.push({
            Price: $('#js-PriceID-' + n).text(),
            Qty: $(this).text()
        });
    });

    console.log("Array: ", productArray);    
}

将Object推送到数组，在属性上使用选择器

2 个答案: