Как спрятать все в элементе "ul", если нет элементов "li", содержащихся в jQuery?

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>

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>

Answer 2

Во-первых, ваш HTML-код недействителен, поэтому я переместил h2 в li.

Тогда нет никаких причин использовать скрипт для этого, CSS и его :only-child будут идеальными.

Фрагмент стека

.qrg-products > li:first-child {
  list-style-type: none;
}

.qrg-products > li:only-child {
  display: none;
}

<ul class="qrg-products">
  <li><h2 class="title">Snack</h2></li>
  <li>Chips</li>
  <li>Fruit</li>
  <li>Cookies</li>
</ul>
<ul class="qrg-products">
  <li><h2 class="title">Candy</h2></li>
</ul>
<ul class="qrg-products">
  <li><h2 class="title">Drinks</h2></li>
  <li>Pop</li>
  <li>Water</li>
  <li>Coffee</li>
</ul>
<ul class="qrg-products">
  <li><h2 class="title">Desserts</h2></li>
</ul>

Answer 3

Ваш HTML-код недействителен, поскольку элементы <ul> могут содержать только элементы <li>.

После перемещения элементов <h2> вы можете проверить наличие пустых элементов <ul>, найти для каждого из них предыдущего брата и скрыть его:

$('.qrg-products:empty').each((i, el) => {
  $(el).prev().hide();
});

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