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

Question

我有两个“名单”

一种是标签列表：

<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打印”。在"sp_sectors“列表中搜索( nothing =nothing)，移动到第二个标记，然后再搜索，第二个标签是”艺术“，现在我们在第二个列表中搜索，我们找到了艺术。

• 艺术

.但它是大写的，所以我不能真正“找到”它

​

下面是我为搜索列表而编写的代码：

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');
   });

});

如何做到:在这种情况下包含不敏感的内容？有人能帮帮我吗？谢谢

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>

​