表格行的jQuery条件选择器答案

【问题标题】：jQuery conditional selector for table rows表格行的jQuery条件选择器
【发布时间】：2011-03-17 22:04:26
【问题描述】：

我有一个数据表：

<td> item </td><td> order code </td><td> price </td>

我正在使用 jQuery 处理需要查找订单代码的表格：

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

如果没有产品，表格会显示一条消息：

<td colspan="3"> There are no products to display </td>

上面的行导致 jQuery 函数被炸毁。使用条件选择器忽略“无产品”行的最可靠方法是什么？是否有colspan="1" 或colspan is not set 或任何需要的选择器？

【问题讨论】：

标签： jquery html html-table jquery-selectors

【解决方案1】：

像这样：

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

这只会选择<tr> 元素的<td> 是其父元素的第二个子元素。（nth-child selector 是从一开始的）

【讨论】：

@jAndy，这个测试简直太糟糕了。您正在测试您的解决方案 500 次，而 SLaks 却被测试了 10000 次！在解决方案运行后，您不会将 start 变量重新定义为 +new Date...
我不知道为什么它没有选择任何东西（.length 显示 0）。 @SLaks，我认为您错过了右括号。这行得通。 stackoverflow.com/questions/3281384/…
@SLaks，您可能想为该选择器添加另一个右括号。
@J-P：你说得对，我的错。 10000 挂了 Firefox 我不得不重新定义它。尽管如此，它还是很慢。新链接：jsfiddle.net/cfznm/2
@J-P：即使有了这个修正，第一个解决方案的速度也快了 10 倍以上。

【解决方案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 
   }
});

【讨论】：

【解决方案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 设置表格样式时更加灵活，并且如果您添加或重新排序列，您的代码也不会中断。

【讨论】：

这可能是个好主意，下次我会记住的

【解决方案4】：

你可以测试有多少tds：

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

【讨论】：

【解决方案5】：

使用.attr() 方法。查看 api.jquery.com，这应该可以帮助您弄清楚如何从单元格中获取 colspan 属性。

【讨论】：

【解决方案6】：

对 SLaks 所写的内容进行更多过滤

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

【讨论】：