仅当td在特定的html标签之后不包含任何内容时才隐藏tr

Question

是否可以在html元素（br）之后检查tr中的内容，以查看是否存在？ 如果br元素后没有任何内容，我想隐藏父td。 请注意，html代码是系统生成的，我无法对其进行编辑。

我只是不确定从哪里开始。 任何帮助是极大的赞赏。

  <table class="tabledefault"> <tbody> <tr> <td id="customfields"> <table class="tabledefault"> <tbody> <tr><!-- this TR should be hidden --> <td id="CAT_Custom_451068"><strong>Laser Tag</strong> <br> </td> </tr> <tr> <td id="CAT_Custom_451069"><strong>Arcade</strong> <br>Selected </td> </tr> <tr> <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong> <br>False </td> </tr> <tr> <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong> <br>True</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> 

Answer 1

是的，您只需要获取tr ，然后找出第一个<td>内的第一个<br>元素是否具有以下任何元素同级（我假设在那里，您不想隐藏这些同级元素），或者以下所有不为空的文本节点兄弟姐妹。 jQuery的contents很方便，因为它包括文本节点。 我可能会向后循环遍历它们：

$("#customfields .tabledefault tr").each(function(index) {
  var $tr = $(this);
  $tr.find("td:first").contents().get().reverse().some(function(node) {
    if (node.nodeName.toUpperCase() === "BR") {
      // Hide it, and we're done looping
      $tr.hide();
      return true;
    }
    if (node.nodeType != 3 || $.trim(node.nodeValue)) {
      // Don't hide it, and we're done looping
      return true;
    }
  });
});

我希望可以对其进行优化，但是您会明白的。

现场示例：

 var counter = 3; tick(); function tick() { $("#countdown").text(counter--); if (counter < 0) { hideIt(); } else { setTimeout(tick, 500); } } function hideIt() { $("#customfields .tabledefault tr").each(function(index) { var $tr = $(this); $tr.find("td:first").contents().get().reverse().some(function(node) { if (node.nodeName.toUpperCase() === "BR") { // Hide it, and we're done looping $tr.hide(); return true; } if (node.nodeType != 3 || $.trim(node.nodeValue)) { // Don't hide it, and we're done looping return true; } }); }); } 

 <table class="tabledefault"> <tbody> <tr> <td id="customfields"> <table class="tabledefault"> <tbody> <tr> <!-- this TR should be hidden --> <td id="CAT_Custom_451068"><strong>Laser Tag</strong> <br> </td> </tr> <tr> <td id="CAT_Custom_451069"><strong>Arcade</strong> <br>Selected </td> </tr> <tr> <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong> <br>False </td> </tr> <tr> <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong> <br>True</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="countdown">&nbsp;</div> 

Answer 2

尝试使用.each() ， nextSibling ， nodeValue ， String.prototype.match() .closest()

 $("table tr td br").each(function(i, el) { // if `br` next sibling does not contain alphanumeric characters, // hide parent `tr` element if (el.nextSibling.nodeType === 3 && el.nextSibling.nodeValue.match(/\\w+/) === null || $(el).next(":empty").length) { $(this).closest("tr").hide() } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <table class="tabledefault"> <tbody> <tr> <td id="customfields"> <table class="tabledefault"> <tbody> <tr><!-- this TR should be hidden --> <td id="CAT_Custom_451068"><strong>Laser Tag</strong> <br><span></span> </td> </tr> <tr> <td id="CAT_Custom_451069"><strong>Arcade</strong> <br>Selected </td> </tr> <tr> <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong> <br>False </td> </tr> <tr> <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong> <br>True</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>