在Wordpress WooCommerce页面中使用jQuery过滤具有同级的div中的内容

我有一个很长的文档列表添加到wooCommerce产品中，我可以将其显示为一个完整的列表。 我想创建一个searchfield来过滤结果，使其更加用户友好。最好使用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>

呈现的列表看起来有点像这样：

2C金属 -安全文件 -技术文件

包含productname的div始终位于类名为：woocommerce产品文档标题的div中。 包含文档列表的同级div始终位于名为：woocommerce-product-documents-491的类中，其中491是一个随机数

因此，我的任务是使用正则表达式创建一个livesearch，该正则表达式搜索PRODUCTNAME的div，然后切换隐藏具有同级的非对应div

我可以使用prepend将searchfield添加到列表顶部： $.woocommerce.prepend“过滤器列表”

我可以在div中搜索productname，但无法选择下一个同级div。我已尝试。下一个、.nextAll、.first。我的主要目标是隐藏所有div，然后取消隐藏与搜索匹配的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();
 });

这是我的解决方案：

 $(".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();
 });

---

选择同级元素的方式可能是不必要的，因为jQuery将允许您将方法链接到选择器。因此，一旦您通过$'…'找到元素数组，接下来您可以调用.toggle或.show，它将应用于所有匹配的类，这也将包括部分匹配到您的搜索中，作为额外的奖励

这里是调整后的代码，一个指向js fiddle的链接不包含搜索栏，但您可以运行脚本并通过它进行调试

$.wooDocList.prepend“过滤器列表”

； $'.wooDocFilter'.keyup函数{ //搜索文本 var text=$this.val； //隐藏所有内容类元素 $'.woocommerce产品文档标题'.hide； $'.woocommerce产品文档'.hide； //搜寻 $'.woocommerce.woocommerce产品文档标题：包含“+文本+”.closest.woocommerce产品文档标题”。切换； //显示同级行 $'.woocommerce.woocommerce产品文档标题：包含“+文本+”.next.toggle； };

---

谢谢你的意见。我会研究你的解决办法。