僅當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>