Используйте jQuery на странице Wordpress WooCommerce, чтобы фильтровать содержимое в div с братьями и сестрами

Question

У меня есть длинный список документов, добавленных в продукты wooCommerce, которые я могу показать в виде полного списка. Я хочу создать поле поиска, чтобы отфильтровать результаты, делая его более удобным для пользователя. Предпочтителен со скриптом jQuery.

Это вывод:

<div class="woocommerce"><h3 class="woocommerce-product-documents-title">2C metall</h3><div class="woocommerce-product-documents-491 woocommerce-product-documents ui-accordion ui-widget ui-helper-reset" role="tablist">

<h3 class="ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span></h3>

<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">

<ul>
   <li><a href="sitename.com/27_2C-Metal_1476_no.pdf" target="_self">Datablad</a></li>
   <li><a href="http://sitename.com/wp-content/uploads/2019/09/2c-metal_TI_EN.pdf" target="_self">teknisk informasjon</a></li>
</ul>
</div>

Визуализированный список выглядит примерно так:

2 C metall - Документ безопасности - Технический документ

Элемент div, содержащий имя продукта, всегда находится в элементе div с именем класса: "woocommerce-product-documents-title". Брат-сестра, содержащий список документов, всегда находится в классе с именем: woocommerce-product-documents-491 (где 491 - случайное число)

Поэтому моя задача - создать livesearch используя регулярные выражения, которые ищут в divах имена продуктов, затем переключают (скрывают) несоответствующие div с родными братьями.

Я могу добавить поле поиска в начало списка, используя prepend: $ (". woocommerce" ) .prepend ('

Фильтр списка

');

Я могу найти в div для названия продукта, но не могу выбрать следующий div. Я пытался .next (), .nextAll (), .first (). Моя главная цель - спрятать все div, а затем показать тот, который соответствует поиску.

кто-нибудь получил отличный «стартовый скрипт»?

Вот что я получил до сих пор:

 $(".wooDocList").prepend('<p><label>Filter List</label><input type="text" class="wooDocFilter"></p>');

 $('.wooDocFilter').keyup(function(){

   // Search text
   var text = $(this).val();

   // Hide all content class element
   $('.woocommerce-product-documents-title').toggle();
   $('.woocommerce-product-documents').toggle();

  // Search 
   $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').closest('.woocommerce-product-documents-title').toggle();

  var test = $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').next().prop("classList")
  //$('.info').text(test[0] + '!!');

  $(test[0]).toggle();
 });

Answer 1

Способ выбора элементов одного уровня, вероятно, не нужен, так как jQuery позволит вам связывать методы с селекторами. Таким образом, если у вас есть массив элементов, найденный с помощью $('...').next(), вы можете вызвать .toggle() или .show(), и он будет применяться ко всем соответствующим классам, что также будет включать частичное совпадение с вашим поиском в качестве дополнительного бонуса.

Вот скорректированный код и ссылка на скрипку js (не содержит строку поиска, но вы можете запустить скрипт и выполнить отладку через него)

$(".wooDocList").prepend('<p><label>Filter List</label><input type="text" class="wooDocFilter"></p>');

$('.wooDocFilter').keyup(function(){

  // Search text
  var text = $(this).val();

  // Hide all content class element
  $('.woocommerce-product-documents-title').hide();
  $('.woocommerce-product-documents').hide();

  // Search 
  $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').closest('.woocommerce-product-documents-title').toggle();

  // Display sibling rows
  $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').next().toggle();
 });

Fiddle is здесь

Answer 2

Это мое решение:

 $(".wooDocList").prepend('<p><label>Filter List</label><input type="text" class="wooDocFilter"></p>');

$('.wooDocFilter').keyup(function(){

  // Search text
  var text = $(this).val();

  // Hide all content class element
  $('.woocommerce-product-documents-title').hide();
  $('.woocommerce-product-documents').hide();

  // Search 
  $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').closest('.woocommerce-product-documents-title').toggle();

 var test = $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').next().prop("classList")
   $('.info').text(test[0] + '!!');

 $('.'+test[0]).show();
 });