表行的 jQuery 条件选择器

发布于 2024-09-10 07:52:14 字数 428 浏览 2 评论 0原文

我有一个包含数据的表：

;项目订单代码价格

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

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

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

;没有可显示的产品

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

原文

I have a table with data in:

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

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

$.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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小女人ら 2024-09-17 07:52:14

像这样：

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

这只会选择元素，其是其父元素的第二个子元素。（nth-child 选择器是基于 1 的）

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)

回复收藏 0 原文

棒棒糖 2024-09-17 07:52:14

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

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

$('.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 
   }
});

回复收藏 0 原文

葬﹪忆之殇 2024-09-17 07:52:14

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

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

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.

回复收藏 0 原文

软糖 2024-09-17 07:52:14

您可以测试有多少个 td：

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

You could test how many tds there are:

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

回复收藏 0 原文