表格行的jQuery条件选择器

Posted 2023-03-05

【中文标题】表格行的jQuery条件选择器

【英文标题】：jQuery conditional selector for table rows

【发布时间】：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 或任何需要的选择器？

【参考方案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，我认为您错过了右括号。这行得通。 ***.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')")