使用 jQuery 和 JavaScript 隐藏特定元素

Question

我们的代码有问题：

function remove_single_entry_if_empty() {
  $(".single-entry").each(function() {
  var ids = $(this).attr('id');
      let a = (ids);
        for ( let i = 0; i < a.length; a++ ) {
          let x = document.getElementById(a);
          if ( x.getElementsByClassName('entry_times-wrapper').length === 1 ) {
            var c = x.getElementsByClassName('entry_times-wrapper').length === 1;
          x.style.display = 'none';
          }
        }
    });
}

HTML 结构：

<div class="single-entry" id="9127">
   <div class="entries_wrapper">
      <div class="entry_times-wrapper">
        <!-- this is where the <a> tags is. -->
      </div>
    </div>
</div>

我们有一个带有single-entry 类的 HTML 标记。此类存在多次，但每个都指定了唯一的 ID。名为entry_times-wrapper 的类名（它是变量X 的子元素）也有多个<a> 标签。

我们想要做的：如果entry_times-wrapper 类中的所有项目都被隐藏（显示none），则仅隐藏该特定ID 的single-entry 类。目前，上述代码实际上将隐藏所有这些单个条目。

我们怎样才能正确地做到这一点？

Answer 1

要实现这一点，您可以使用一行 jQuery 选择所有包含隐藏 .entry_times-wrapper 的 .single-entry 元素，然后隐藏它们。试试这个：

$('.single-entry:has(.entry_times-wrapper:hidden)').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="single-entry" id="9127">
   <div class="entries_wrapper">
      <div class="entry_times-wrapper">
        <a href="#">Visible...</a>
      </div>
    </div>
</div>
<div class="single-entry" id="9128">
   <div class="entries_wrapper">
      <div class="entry_times-wrapper">
        <a href="#" style="display: none">Not visible...</a>
      </div>
    </div>
</div>
<div class="single-entry" id="9120">
   <div class="entries_wrapper">
      <div class="entry_times-wrapper">
        <a href="#">Visible...</a>
      </div>
    </div>
</div>

Answer 2

这是一个包含多个<div>s 和<a>s 的工作演示：

$("button").click(function(){ $(".single-entry").add("a").show();});
$(".entry_times-wrapper a").click(function(){ $(this).hide();checkVis();})

// this needs to be called every time an <a> element is hidden or made visible again:
function checkVis(){
  $(".single-entry").each(function(){
    $(this).toggle($(".entry_times-wrapper a:visible",this).length>0)
  });
}

.single-entry {background-color:#ccc; padding:6px;
               border: 1px black solid; margin: 4px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>show all links again</button><br>
<div class="single-entry" id="9127">
   <div class="entries_wrapper">
      <div class="entry_times-wrapper">
        <a href="#">first link<br></a>
        <a href="#">second link<br></a>
        <a href="#">third link</a>
      </div>
    </div>
</div>
<div class="single-entry" id="9128">
   <div class="entries_wrapper">
      <div class="entry_times-wrapper">
        <a href="#">fourth link<br></a>
        <a href="#">fifth link<br></a>
        <a href="#">sixth link</a>
      </div>
    </div>
</div>
<div class="single-entry" id="9129">
   <div class="entries_wrapper">
      <div class="entry_times-wrapper">
        <a href="#">seventh link<br></a>
        <a href="#">eighth link<br></a>
        <a href="#">ninth link</a>
      </div>
    </div>
</div>