jQuery条件选择器用于表格行

Question

我有一张包含数据的表格：

<td> 商品 </td><td> 订单编号 </td><td> 价格 </td>

我正在使用jQuery处理这个表格，需要找到订单编号：

$.each($('.productList tbody tr'), function() {
    var orderCode = $(this).find('td:eq(1)').html().trim();
    // do stuff
});

如果没有产品，表格会显示一条消息： 没有产品可展示 上述行会导致jQuery函数崩溃。如何使用条件选择器最稳健地忽略“无产品”行？是否有一个选择器可以选择colspan="1"或者colspan未设置，或者其他需要的方式？

- fearofawhackplanet

Answer 1

像这样：

Like this:

$('.productList tbody tr:has(td:nth-child(2))').each(function() {
    ...
});

这将仅选择其父元素中第二个子元素为 <td> 的 <tr> 元素。（nth-child 选择器 是基于一的计数）

- SLaks

---

@jAndy，那个测试结果太糟糕了。你只测试了你的解决方案500次，而SLaks的测试了10000次！而且你在解决方案运行后没有重新定义“start”变量为“+new Date”。 - James

@J-P：好的，现在全部修复了，但仍然比FireFox 3.6.6慢大约300ms vs. 2500ms。 - jAndy

@jAndy，你的测试也缺少Slaks选择器中的右括号。由于某种原因，即使加上正确的括号，他的选择器仍会抛出错误。:has(td+td)可能更好... - James

@J-P：哇，确实。它会抛出一个错误。:has(td+td)更好，但仍然慢了近50%。 - jAndy

@jAndy，没错。顺便说一下，你可以使用$('table tbody tr')来代替$('table').find('tbody').find('tr')（在Chrome中更快，大约快40毫秒）。 - James

Answer 2

不要优化你的选择器，这样做在大规模应用时会导致jQuery需要评估每个子元素。相反，避免出现错误...

$('.productList tbody tr').each(function() { 
   var orderCode = $(this).find('td:eq(1)');

   if(orderCode.length > 0) { // Make sure it exists
     orderCode = orderCode.html().trim(); 
     // do stuff 
   }
}); 

- Josh Stodola

Answer 3

如果您可以更改生成表格的方式，使用类是一种更清晰的解决方案：

<td class="item-name"> item </td>
<td class="order-code"> order code </td>
<td class="item-price"> price </td>

然后只选择所需的类：

var orderCode = $(this).find('td.order-code').html().trim();
if(orderCode)
{
  //do stuff
}

这样做还可以增加您使用CSS对表格进行样式设置的灵活性，如果您添加或重新排序列，您的代码也不会出错。

- Kip

---

那可能是个好主意，我下次会记住的。 - fearofawhackplanet

Answer 4

你可以测试有多少个td：

$.each($('.productList tbody tr'), function() {
    var tds = $(this).find('td');
    if(tds.length >= 2) {
        var orderCode = tds.eq(1).html().trim();
        // do stuff
    }
});

- Felix Kling

Answer 5

使用 .attr() 方法。查看 api.jquery.com，这应该能帮助您找出如何从单元格中获取 colspan 属性的方法。

- Charmander

Answer 6

对SLaks所写的内容进行更多的筛选

$("table tbody tr td:nth-child(2):contains('code')")

- IsmailS