jquery - 如果没有使用 jQuery 包含的“li”元素，如何隐藏“ul”元素中的所有内容？

Question

我有多个包含标题和列表项的无序列表，但是，一些无序列表没有列表项，我想隐藏此特定列表的标题（即“Candy”）。

我尝试过.hide()使用.css("display","none").

我希望“零食”和“饮料”列表保持不变，而“糖果”和“甜点”无序列表被隐藏，因此如果为空则不显示标题。

if (!$("ul.qrg-products").has("li").length) {
  $(".qrg-products").css("display", "none");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="qrg-products">
  <h2 class="title">Snack</h2>
  <li>Chips</li>
  <li>Fruit</li>
  <li>Cookies</li>
</ul>
<ul class="qrg-products">
  <h2 class="title">Candy</h2>
</ul>
<ul class="qrg-products">
  <h2 class="title">Drinks</h2>
  <li>Pop</li>
  <li>Water</li>
  <li>Coffee</li>
</ul>
<ul class="qrg-products">
  <h2 class="title">Desserts</h2>
</ul>

标签： jquerycss

Answer 1

我建议您使用有效的 HTML

如果您移动标题，您需要使用 .prev 隐藏它们 - 我在这里选择切换。

您还可以将标题移动到 li 并切换长度 === 1

$("ul.qrg-products").each(function() {
  var len = $(this).find("li").length > 0
  $(this).toggle(len>0); // not super necessary since empty
  $(this).prev().toggle(len>0); // hide the Header
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="title">Snack</h2>
<ul class="qrg-products">
  <li>Chips</li>
  <li>Fruit</li>
  <li>Cookies</li>
</ul>
<h2 class="title">Candy</h2>
<ul class="qrg-products">
</ul>
<h2 class="title">Drinks</h2>
<ul class="qrg-products">
  <li>Pop</li>
  <li>Water</li>
  <li>Coffee</li>
</ul>
<h2 class="title">Desserts</h2>
<ul class="qrg-products">
</ul>

如果您无法更改 HTML：

$("ul.qrg-products").each(function() {
  $(this).toggle($(this).find("li").length>0)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="qrg-products">
  <h2 class="title">Snack</h2>
  <li>Chips</li>
  <li>Fruit</li>
  <li>Cookies</li>
</ul>
<ul class="qrg-products">
  <h2 class="title">Candy</h2>
</ul>
<ul class="qrg-products">
  <h2 class="title">Drinks</h2>
  <li>Pop</li>
  <li>Water</li>
  <li>Coffee</li>
</ul>
<ul class="qrg-products">
  <h2 class="title">Desserts</h2>
</ul>