如何使用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()，但我有一种有趣的感觉，你有多个这些块。如果是这种情况让我知道，我会更新我的答案。如果没有，可以简化为：

$(document).ready(function () {
  if ($(".relItemdisplay").text().trim() !== "") {
    $('relItemhide').css("display", "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");
    }
  });
});