Блог

Главная - Вопросы по программированию - Показывать div, когда существует более шести элементов списка

Показывать div, когда существует более шести элементов списка

#javascript #jquery

#javascript #jquery

Вопрос:

Я хотел бы показать родительский поиск div при нажатии на элемент div или при загрузке страницы, если элементов списка больше шести. Я пытаюсь использовать siblings() и siblings().closest() , но не работает.

Пожалуйста, посмотрите ссылку code и codepen live code ниже.

Код:https://codepen.io/codepat007/pen/BaKvvoE

 $(document).on('click', '.wrap', function() {

  if ($(this).find('.searchresult ul li').length > 6) {
    $(this).siblings().closest('.SearchWrap').show();
  }

});  
 .wrap {
  float: left;
  width: 30%
}

.SearchWrap {
  display: none
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <p>123</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
    </ul>
  </div>
</div>


<div class="wrap">
  <p>456</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
    </ul>
  </div>
</div>

<div class="wrap">
  <p>789</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <div class="nodata">no data</div>
  </div>
</div>

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

1. Ваше использование «родительского» подразумевает родительский элемент выбранного элемента. Не имеет значения, что он является родительским для ввода поиска. Содержимое отображаемого элемента не имеет значения.

2. И вам действительно не следует перемещать цель, изменяя свои параметры после публикации ответов.

3. Вы действительно хотите, чтобы это запускалось только при нажатии на документ, или вы выбрали именно этот способ убедиться, что функция запускается и скрывает или показывает соответствующие элементы?

Ответ №1:

Я бы предложил использовать имена классов CSS для обработки отображения или скрытия различных элементов на странице, это часто более надежно и расширяемо, чем манипулирование встроенным style атрибутом отдельных элементов, особенно если вам нужно вернуть эти элементы в их состояние по умолчанию после манипулирования несколькими свойствами.

В идеале элементы должны быть скрыты, и, следовательно, класс должен быть добавлен с помощью JavaScript, чтобы элементы были видны при отсутствии JavaScript, разрешенного для запуска на странице. Именно поэтому я также добавил строку

 $('.SearchWrap').addClass('hidden');

для JavaScript, ниже. Тем не менее, один из подходов приведен ниже:

 // causes the enclosed functionality to execute only once the
// document is ready, and the content loaded:
$(document).ready(function() {

  // using jQuery to find the '.SearchWrap' elements
  // and add the 'hidden' class-name to them in order
  // hide them on page-load:
  $('.SearchWrap').addClass('hidden');

  // binding the anonymous function of the on() method as the
  // event-handler for the 'click' event when that event
  // originates from, or from within, an element with the
  // class-name of 'wrap':
  $(document).on('click', '.wrap', function() {

    // here 'this' (and $(this)) refer to the .wrap
    // element upon, or within, which the 'click' orginated:
    $(this)

      // from the .wrap' element we find the '.SearchWrap'
      // descendant(s) and we call the toggleClass() method:

      .find('.SearchWrap')
      // within the toggleClass() method-call we pass a
      // class-name ('hidden') and an assessment:
      .toggleClass('hidden',
      
        // if this assessment evaluates to true then
        // the class-name is added, if it evaluates
        // to false it is removed or not-added. The
        // assessment here is to find the elements
        // within the current .wrap element that match
        // the CSS selector, and tests that the length
        // is less than 6; in this way if the length
        // is less than 6 (and evaluates to true) the
        // 'hidden' class-name is applied to .SearchWrap
        // otherwise, if the element is 6 or more the
        // assessment evaluates to false, and the
        // 'hidden' class-name is removed or not-added,
        // so .SearchWrap remains visible or becomes
        // visible:
        $(this).find('.searchresult li').length < 6
      );
    });
});
  

 $(document).ready(function() {
  $('.SearchWrap').addClass('hidden');
  $(document).on('click', '.wrap', function() {
    $(this).find('.SearchWrap').toggleClass('hidden',
      $(this).find('.searchresult li').length < 6
    );
  });
});  
 *,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  gap: 2vw;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5em;
}

.wrap {
  border: 1px solid #000;
}

.SearchWrap {
  display: initial;
}

.SearchWrap.hidden {
  display: none;
}

ul,
li {
  list-style-type: none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <p>123</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
    </ul>
  </div>
</div>


<div class="wrap">
  <p>456</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
      <li>A</li>
    </ul>
  </div>
</div>

<div class="wrap">
  <p>789</p>
  <div class="SearchWrap">
    <input type="text" />
  </div>
  <div class="searchresult">
    <div class="nodata">no data</div>
  </div>
</div>

Демонстрация скрипки JS.

Ссылки:

Ответ №2:

У вас есть пара проблем с обходом DOM. Давайте захватим выбранный абзац для последующего использования и используем siblings() функцию с модификатором класса.

 $(document).on('click', '.wrap p', function() {
  const paragraph = $(this);

  if (paragraph.siblings('.searchresult').find('ul li').length > 6) {
    paragraph.siblings('.SearchWrap').show();
  }
});