javascript - 如何使用 jquery 或 java 脚本访问父 div 和最接近该 div 的元素？

Question

HTML:

<h3 style="display:none;" class="relItemhide ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">Related Items</a></h3>
<div style="display: none;" class="relItemhide ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
  <table width="100%">
    <tbody>
      <tr class="relItemdisplay"></tr>
      <tr></tr>
    </tbody>
  </table>
</div>

如果.relItemdisplay类文本不等于空白，我想将div和h3的CSS改成display : block ;。

这是我目前尝试过的方法，但它不起作用

JavaScript/jQuery

$(document).ready(function () {
  $(".relItemdisplay").each(function() {
    if ($(this).text().trim() !== "") {
      $(this).parent().closest('h3').css("display", "block");
    }
  });
});

Answer 1

与其尝试在 DOM 中导航，我建议您使用类:

$(document).ready(function () {
  $(".relItemdisplay").each(function() {
    if ($(this).text().trim() !== "") {
      $('relItemhide').css("display", "block");
    }
  });
});

虽然我不确定您为什么要使用 .each()，但我有一种有趣的感觉，您有多个这样的 block 。如果是这种情况，请告诉我，我会更新我的答案。如果不是，可以简化为:

$(document).ready(function () {
  if ($(".relItemdisplay").text().trim() !== "") {
    $('relItemhide').css("display", "block");
  }
});

为多个 block 更新:

HTML:

<div class="relItem">
<h3 style="display:none;" class="relItemhide ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">Related Items</a></h3>
<div style="display: none;" class="relItemhide ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
  <table width="100%">
    <tbody>
      <tr class="relItemdisplay"></tr>
      <tr></tr>
    </tbody>
  </table>
</div>
</div>
<div class="relItem">
<h3 style="display:none;" class="relItemhide ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">Related Items</a></h3>
<div style="display: none;" class="relItemhide ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
  <table width="100%">
    <tbody>
      <tr class="relItemdisplay"></tr>
      <tr></tr>
    </tbody>
  </table>
</div>
</div>

Javascript/jQuery:

$(document).ready(function () {
  $(".relItem .relItemdisplay").each(function() {
    if ($(this).text().trim() !== "") {
      $(this).parents('.relItem').find('.relItemhide').css("display", "block");
    }
  });
});