Question

我希望能够找到隐藏前面<td>内容的方法，如果上面的内容为空。我的表设置如下：

<tr>
  <td class="firsttd">
  </td>
</tr>
<tr>
  <td class="nexttd">
  Hide me if above TD is empty
  </td>
</tr>
<tr>
  <td class="firsttd">
  </td>
</tr>
<tr>
  <td class="nexttd">
  Hide me if above TD is empty
  </td>
</tr>

到目前为止：

$(".firsttd").each(function( index ) {
    var dotlenght = $(this).html().length;

    if (dotlenght < 1){
        $(this).next('.nexttd').hide();
    } 
});

但无法让它正常工作。我无法想象如何告诉JQuery要定位哪个元素。

有人能指出我正确的方向吗？

Answer 1

您需要使用：

 $(this).parent().next().find('.nexttd').hide();
            ||     ||     ^^------find td `.nexttd`
            ||     ^^------Traverse to next tr
            ^^------Traverse to parent tr

此外，您无需单独迭代元素。您可以使用.filter()函数定位所有空的第一个td元素，并可以将完整代码缩小到：

  $( "td.firsttd" ).filter(function(){
      return $(this).html() == "";
  }).parent().next().find('.nexttd').hide();

Answer 2

您的代码中存在两个问题。

首先是内容的长度：

$(this).html().length; // will produce 1

$.trim($(this).html()).length; // will produce 0

第二个是隐藏下一行：

 $(this).next().find('.nexttd').hide();

应该是：

 $(this).parent().next().find('.nexttd').hide();

如果元素为空则隐藏下一个元素

2 个答案: