Блог

Главная - Вопросы по программированию - Скрыть элемент, только если дочерний элемент существует

Скрыть элемент, только если дочерний элемент существует

#javascript #jquery

#javascript #jquery

Вопрос:

Несколько родительских элементов с разным количеством дочерних элементов, например:

 <div class="items">
  <div></div>
  <div>hide this child</div>
  <div></div>
</div>

<div class="items">
  <div></div>
  <div>don't hide this child</div>
</div>

Можно почти решить с помощью этого:

 if ($(".items div:nth-child(3)").length) {
    $(".items div:nth-child(2)").hide();
}

Он скрывает второй div у обоих родителей, но он должен скрываться только у первого родителя, потому что у второго родителя нет третьего дочернего элемента.

Комментарии:

1. В чистом JS-стиле вы можете попробовать так: codepen.io/Maniraj_Murugan/pen/pobErwV

Ответ №1:

Использование CSS last-child 

 .items div:nth-child(2):not(:last-child) {
  display: none;
}  
 <div class="items">
  <div></div>
  <div>hide this child</div>
  <div></div>
</div>

<div class="items">
  <div></div>
  <div>don't hide this child</div>
</div>

Использование Jquery

$(".items div") выбирает все дочерние элементы. Таким образом, вы можете использовать each() для выбора дочернего элемента из другого родительского

 $(".items").each(function() {
  if ($("div", this).length > 2) {
    $("div:nth-child(2)", this).hide();
  }
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="items">
  <div></div>
  <div>hide this child</div>
  <div></div>
</div>

<div class="items">
  <div></div>
  <div>don't hide this child</div>
</div>

Примечание: селектор потомков (пробел) выбирает всех как дочерних, так и внуков. Если вам нужны только дочерние элементы, используйте дочерний селектор (>)

Ответ №2:

Ваш селектор захватывает все .items в документе, поэтому он почти всегда будет скрывать второй.

Вместо этого вы хотите оценить дочерние элементы каждого элемента отдельно, чтобы определить, следует ли его скрывать или нет.

Смотрите демонстрационный код ниже

 $(function() {
  // get all the items
  var items = $(".items");

  // check their children, if more than 2 children, hide them
  $.each(items, function(idx, item) {
    if ($(item).children().length > 2) {
      $(item).hide();
    }
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items">
  <div></div>
  <div>hide this child</div>
  <div></div>
</div>

<div class="items">
  <div></div>
  <div>don't hide this child</div>
</div>