Question

我要做的是分离此表中的三个表行，并让jQuery单独处理它们以查找单独的值（如价格和SKU - 您将在下面的小提琴链接中看到）。 / p>

因为表是动态生成的，并且每个产品的所有类都相同，所以我尝试将每个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 Link： http://jsfiddle.net/hslincoln/7HXBQ/10/

任何指针？

Answer 1

HTML中出现了一些有用的div，可以避免使用正则表达式。这没有经过测试，但有点类似......

$('#wizrtable tr').each( function( index,element)  {
   var sku = $(element).find( 'div[title="pid"]').text();
   var qty = $(element).find( 'div[title="qty"]').text();
   var price = $(element).find( 'div[title="tv"]').text();
});

Answer 2

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

一些更正：

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

第二个伪选择器不存在。使用：nth-child（n）。另外.children（）只适用于直接的孩子，所以你还在那里新人...我的坏。

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.因此，这条线不会做任何事情。

Answer 3

除了输出之外，这样就无需计算出表格中有多少产品，并且会刮掉整个表格的数据....

$(document).ready(function () {
// Define unit price
var tbody = $('.wizrtable tbody');
var prices = $(tbody).find('.priceeach');
var skus = $(tbody).find('.sku');
var quants = $(tbody).find('.quantity');
var product = [];

$(prices).each(function (idx) {
    product[idx] = {
        price: $(this).text().replace(/\u00A3/g, '')
    }
});
// END: Define unit price

// Define item IDs for each product
$(skus).each(function (idx) {
    product[idx].sku = $(this).text().replace("Product Code:", "");
});

$(quants).each(function (idx) {
    product[idx].qty = $(this).text();
});
// END: Define item IDs for each product

// Inject html div with result
// 1
$(".Firstprodprice").text(product[0].price);
$(".FirstSKU").text(product[0].sku);
$(".FirstQTY").text(product[0].qty);
// 2
$(".Secondprodprice").text(product[1].price);
$(".SecondSKU").text(product[1].sku);
$(".SecondQTY").text(product[1].qty);
// 3
$(".Thirdprodprice").text(product[2].price);
$(".ThirdSKU").text(product[2].sku);
$(".ThirdQTY").text(product[2].price);
});

使用jQuery在表中的单独tr中使用.text（）查找值

3 个答案: