jQuery 包含从一个列表到另一个列表的不敏感数据搜索

Question

我有2个"lists"

一个是标签列表：

<span class="blog-tags minor-meta">
  <span>
    <a rel="tag">3d printing</a>
    <a rel="tag">art</a>
    <a rel="tag">medical</a>
    <a rel="tag">Prototyping</a>
  </span>
</span>

和另一个服务列表

<ul class="sp_sectors">
  <li>Engineering</li>
  <li>Automotive</li>
  <li>Medical</li>
  <li>Prototyping</li>
  <li>ART</li>
</ul>

我正在尝试搜索标签列表中的每个标签（如果它存在于服务列表中）并向其添加 "class = active"：例如，第一个标签“3d printing”.. 搜索 "sp_sectors" 列表（未找到 = 没有任何反应，移动到第二个标签并再次搜索，第二个标签是 "art"，现在我们在第二个列表，我们找到艺术“

ART

”..但它是大写的所以我真的不能"find"它..）

这是我编写的用于搜索列表的代码：

jQuery('.blog-tags > span > a').each(function() {

   var thi_tag = jQuery(this).html();

   jQuery('.sp_sectors li').each(function() {
      jQuery(".sp_sectors li:contains('" + thi_tag + "')").addClass('active');
   });

});

在这种情况下我该怎么做 :contain insensitive？有谁可以帮助我吗？谢谢

Answer 1

如您所见，:contains 区分大小写。一种替代方法是在 filter() 中构建您自己的逻辑，它使用不区分大小写的正则表达式匹配两个元素的文本。另请注意，内部 each() 循环不是必需的。

$('.blog-tags > span > a').each(function() {
  var aText = $(this).text();
  $('.sp_sectors li').filter(function() {
    return RegExp(aText, 'gi').test($(this).text());
  }).addClass('active');
});

.active { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="blog-tags minor-meta">
  <span>
    <a rel="tag">3d printing</a>
    <a rel="tag">art</a>
    <a rel="tag">medical</a>
    <a rel="tag">Prototyping</a>
  </span>
</span>

<ul class="sp_sectors">
  <li>Engineering</li>
  <li>Automotive</li>
  <li>Medical</li>
  <li>Prototyping</li>
  <li>ART</li>
</ul>

Answer 2

希望能解决你的问题

jQuery('.blog-tags > span > a').each(function() {
   var searchText = $(this).text();
   jQuery('.sp_sectors').find( ":contains('" + searchText + "')" ).addClass('active');
});

.active { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="blog-tags minor-meta">
  <span>
    <a rel="tag">3d printing</a>
    <a rel="tag">art</a>
    <a rel="tag">medical</a>
    <a rel="tag">Prototyping</a>
  </span>
</span>

<ul class="sp_sectors">
  <li>Engineering</li>
  <li>Automotive</li>
  <li>Medical</li>
  <li>Prototyping</li>
  <li>ART</li>
</ul>

jQuery 包含从一个列表到另一个列表的不敏感数据搜索

jQuery contains insensitive search for data from one list to another

html

javascript

jquery

contains