使用 JQuery 在 TR 中查找第一个带有文本的 TD答案

【问题标题】：Find first TD with text in a TR with JQuery使用 JQuery 在 TR 中查找第一个带有文本的 TD
【发布时间】：2012-11-11 19:55:48
【问题描述】：

我正在使用 JQuery 遍历表中的所有 TR，

但并非所有行在第一个单元格中都有值。

<TR>
  <TD>3</TD>
  <TD>2</TD>
  <TD>1</TD>
</TR>
  <TD></TD>
  <TD>3</TD>
  <TD>2</TD>
<TR>
</TR>
<TR>
  <TD></TD>
  <TD></TD>
  <TD>3</TD>
</TR>

如何定位每行中不为空的第一个 TD 而不仅仅是第一个孩子？

谢谢！

【问题讨论】：

你的迭代代码是什么样的？

标签： jquery html html-table

【解决方案1】：

这里有一个更简单、更优雅的解决方案：

$('tr').find('td:not(:empty):first').css('background', 'red');

小提琴：http://jsfiddle.net/dandv/JRcEf/

它只是在 jQuery 中说明了你的意思：“在每个 tr 中定位 first td，它是 not 空的”。

【讨论】：

这太好了，我希望有一个基于选择器的方法，但无法做到。谢谢！
@BarakChamo：请注意，这将需要 jQuery 来处理选择器，它无法交给浏览器自己的（快得多）选择器引擎.当然，99.9% 的时间都没有关系！

【解决方案2】：

这会在每个 tr 中找到第一个非空白子 td：

$("tr").each(function() {
    var $firstNonEmptyCell;

    $(this).children("td").each(function() {
        var $td = $(this);
        if ($td.text() === "") {
            $firstNonEmptyCell = $td;
            return false; // Breaks `each` loop
        }
    });

    // ...use `$firstNonEmptyCell` here
});

或者，如果您想要一个用于所有非空白的 jQuery 包装器，这是 filter 的一个微不足道的用例：

$("tr").each(function() {
    var nonBlankCells = $(this).children("td").filter(function() {
        return $(this).text() !== "";
    });

    // Use `nonBlankCells` here
});

【讨论】：

可能是微不足道的，但不会打败one-liner ;)

【解决方案3】：

var tds = [];

$('#tableId tr').each(function()
{
  $(this).find('td').each(function()
  {
    if ( $(this).html() != '' )
    {
      tds.push($(this));
      return false;
    }
  });
});

瞧，tds 变量中你得到了你的 td 标签

【讨论】：