Методы переключения видимости родительских элементов на основе значения поиска в JavaScript и jQuery

Предоставленный вами код представляет собой код JavaScript с использованием jQuery. Позвольте мне объяснить это на английском языке:

Код $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) >-1);используется для переключения видимость родительского элемента на основе значения поиска. Вот разбивка:

  • $(this)относится к текущему элементу.
  • .parent()выбирает родительский элемент текущего элемента.
  • .toggle() — метод jQuery, который переключает видимость элемента.
  • $(this).text().toLowerCase()извлекает текстовое содержимое текущего элемента и преобразует его в нижний регистр.
  • .indexOf(value) >-1проверяет, найдено ли искомое значение в текстовом содержимом текущего элемента. Если индекс больше -1, это означает, что значение поиска присутствует.

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

Теперь давайте перейдем к предоставлению вам нескольких методов. Вот несколько альтернативных способов добиться аналогичного результата:

Метод 1. Использование стандартного JavaScript:

var elements = document.querySelectorAll('.parent-element');
elements.forEach(function(element) {
  if (element.textContent.toLowerCase().indexOf(value) > -1) {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
});

Метод 2: использование метода jQuery .filter():

$('.parent-element').filter(function() {
  return $(this).text().toLowerCase().indexOf(value) > -1;
}).show().end().hide();

Метод 3: использование метода jQuery .each():

$('.parent-element').each(function() {
  var text = $(this).text().toLowerCase();
  if (text.indexOf(value) > -1) {
    $(this).show();
  } else {
    $(this).hide();
  }
});