jquery - 使用 jQuery 在表中的单独 tr 中使用 .text() 查找值

Question

我想要做的是将此表中的三个表行分开，并让 jQuery 分别处理它们以找到单独的值(如价格和 SKU - 您将在下面的 fiddle 链接中看到)。

因为表格是动态生成的，并且每个产品的所有类都是相同的，所以我试图将每个 tr 定义为一个单独的变体，然后使用 .text() 搜索它们以获取值。

这里有一些代码(下面的 jsfiddle 链接):

jQuery:

var firstprice = $('#checkout .orderitems table.wizrtable tbody tr td.priceeach').text().replace(/\u00A3/g, '');
//price of a single product in checkout

var amountofproducts = $('#checkout .wizrtable tbody tr').length;
//amount of table rows in the actual checkout table structure


$(document).ready(function () {
    if (+amountofproducts >= 4 && +amountofproducts <= 8) {
        // Define unit price
        var firstrow = $('.wizrtable').closest('table').children('tr:first');
        var firstprice = $(firstrow()('#checkout .orderitems table.wizrtable tbody tr td.priceeach')).text().replace(/\u00A3/g, '');
        var secondrow = $('.wizrtable').closest('table').children('tr:second');
        var secondprice = $(secondrow()('#checkout .orderitems table.wizrtable tbody tr td.priceeach')).text().replace(/\u00A3/g, '');
        var thirdrow = $('.wizrtable').closest('table').children('tr:third');
        var thirdprice = $(thirdrow()('#checkout .orderitems table.wizrtable tbody tr td.priceeach')).text().replace(/\u00A3/g, '');
        // END: Define unit price

        // Define item IDs for each product
        var firstSKU = $(firstrow()('#checkout .orderitems table.wizrtable tbody .name .sku')).text().replace("Product Code: ", "");
        var secondSKU = $(secondrow()('#checkout .orderitems table.wizrtable tbody .name .sku')).text().replace("Product Code: ", "");
        var thirdSKU = $(thirdrow()('#checkout .orderitems table.wizrtable tbody .name .sku')).text().replace("Product Code: ", "");
        // END: Define item IDs for each product

        // Inject html div with result
        var Firstprodprice = jQuery("FirstprodPrice").text(firstprice);
    }
});

JS Fiddle 链接: http://jsfiddle.net/hslincoln/7HXBQ/10/

有什么指点吗？

Answer 1

您的 jsfiddle 或多或少是正确的。我已经更新了它:http://jsfiddle.net/Ht5nm/2/ .

一些更正:

var secondrow = $('.wizrtable').children('tr:second');

第二个伪选择器不存在。使用 :nth-child(n)。另外 .children() 只适用于直接的 child ，所以你仍然在那里新建 tbody ......我的错。

var secondrow = $('.wizrtable tbody').children('tr:nth-child(2)');

这里我不知道变量前面的+是干什么用的。 if(+amountofproducts >= 4 && +amountofproducts <= 8)但是该变量取决于您有多少表行，因此 if 语句中的代码不会在您的 jsfiddle 中运行。

此外，您的 jsfiddle 中的代码需要 #checkout 才能运行一些预期的代码，我已将其添加到我的 jsfiddle 中。

您处理此问题的方式并不能真正扩展到许多表行。例如，您想动态处理行，而不是使用 firstrow secondrow thirdrow 等。

var Firstprodprice = jQuery("FirstprodPrice").text(firstprice);

这不需要分配给变量，并且具有类“Firstprodprice”的元素在价格中没有大写 P。因此这条线不会做任何事情。