用于表行的jQuery条件选择器

I have a table with data in:

我有一个数据表:

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

item 订单代码价格

I'm processing the table with jQuery which needs to find the order code:

我正在使用jQuery处理表,需要查找订单代码:

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

If there are no products, the table shows a message:

如果没有产品,表格会显示一条消息:

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

没有要展示的产品

The above row causes the jQuery function to bomb out. What's the most robust way to use a conditional selector to ignore the "no products" row? Is there a selector for colspan="1" or colspan is not set or whatever it would need to be?

上面的行导致jQuery函数爆炸。使用条件选择器忽略“无产品”行的最有效方法是什么?是否有colspan =“1”的选择器或没有设置colspan或者它需要什么?

6 个解决方案

#1

Don't refine your selector, it won't scale well because jQuery will have to evaluate every child element. Avoid the error instead...

不要优化你的选择器,它不能很好地扩展,因为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 
   }
});

#2

Like this:

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

This will only select <tr> elements that have a <td> that is the second child of its parent. (the nth-child selector is one-based)

这将只选择元素,其中是其父元素的第二个子元素。 (第n个子选择器是一个基于一个)

#3

If you can change how you generate the table, using classes is a cleaner solution:

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

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

Then select only the desired class:

然后只选择所需的类:

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

This will also give you increased flexibility in styling the table with CSS, and your code won't break if you add or reorder columns.

这也可以增加使用CSS设置表格样式的灵活性,如果添加或重新排序列,代码也不会中断。

#4

You could test how many tds there are:

你可以测试有多少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

Use the .attr() method. Check out api.jquery.com and that should help you be able to figure out how to get the colspan attribute from your cells.

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

#6

More filtration to what SLaks has written

更多过滤SLaks编写的内容

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

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

#1