Question

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

<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的选择器或其他需要的选择器？

Answer 1

像这样：

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

这将只选择<tr>元素，其中<td>是其父级的第二个子级。（nth-child selector是基于一个的）

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 
   }
});

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为表格设置样式，并且如果添加或重新排序列，代码也不会中断。

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
    }
});

Answer 5

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

Answer 6

更多过滤SLaks编写的内容

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

用于表行的jQuery条件选择器

6 个答案: