如何仅搜索 HTML 列表中的特定跨度标记而不搜索所有列表项？ (jQuery)

Posted 2023-05-09

【中文标题】如何仅搜索 HTML 列表中的特定跨度标记而不搜索所有列表项？ (jQuery)

【英文标题】：How to search only for a specific span tag in a HTML list and not for all list items? (jQuery)

【发布时间】：2019-06-19 01:29:27

【问题描述】：

我的类别过滤器有问题。 我创建了一个包含不同类别的下拉选择和一个包含标题和类别等信息的普通列表。如果用户在示例“IT”中选择一个选项，它会显示所有带有“IT”一词的列表项。现在的问题是它过滤了所有带有“IT”的单词，但我只想搜索标签“categoryname”。

这是我的代码：

$(document).ready(function() 
  $(".categoryselection").on("change", function() 
    var value = $(this).val().toLowerCase();
    $("#myList li.list-choose span.kategorie, #myList li.list-choose").filter(function() 
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      $("span.categoryname").css(
        display: 'block',
        color: '#e60'
      )
    );
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="categoryselection">
  <option selected="selected" disabled="disabled">Category</option>
  <option value="All categorys">All categorys</option>
  <option value="Economy">Economy</option>
  <option value="Politics">Politics</option>
  <option value="IT">IT</option>
</select>

<ul id="myList">
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 1: test</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Economy<span style="display: none">All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: test 2</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Politics<span style="display: none">All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: test 3</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Economy<span style="display: none">All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: IT</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">No category<span style="display: none">All categorys</span></span>
    </div>
  </li>
</ul>

您可以看到它还搜索列表项的名称（如果您选择“IT”类别，它也会显示“政治”，因为它在这个词中 - 但这不是我想要的 :D）。但我希望它只在“categoryname”类中查找 span 标签。

【问题讨论】：

熟悉您正在使用的库的基本documentation 总是很有用的。

【参考方案1】：

您的代码有几个问题：

遇到此类问题时，您应该学习如何调试，例如使用console.log，以确保您的选择得到您想要的（删除 cmets 以查看它们的实际效果） 你在这里无缘无故地使用了filter。 Filter 返回一个数组，该数组根据参数函数返回true 或false 来过滤您的基本数组。使用 jQuery 的 each 或普通的 JS map 您可以使用find 在您的第一个选择中选择元素 你会在一个字符串中得到几个类别标签，如果你想将它们隔离开，你必须使用分隔符（我选择了“|”）。然后您可以使用split 将字符串转换为数组，并使用indexOf 来检查是否匹配：

祝你好运！

$(document).ready(function() 
  $(".categoryselection").on("change", function() 
    var value = $(this).val().toLowerCase();
    $("#myList li.list-choose span.kategorie, #myList li.list-choose").each(function() 
      //console.log($(this)); //will show the current element
      //console.log($(this).text()); //will show the current element's text
      $(this).toggle($(this).find(".categoryname").text().toLowerCase().split("|").indexOf(value) > -1);
      $("span.categoryname").css(
        display: 'block',
        color: '#e60'
      )
    );
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="categoryselection">
  <option selected="selected" disabled="disabled">Category</option>
  <option value="All categorys">All categorys</option>
  <option value="Economy">Economy</option>
  <option value="Politics">Politics</option>
  <option value="IT">IT</option>
</select>

<ul id="myList">
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 1: test</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Economy<span style="display: none">|All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: test 2</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Politics<span style="display: none">|All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: test 3</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">Economy<span style="display: none">|All categorys</span></span>
    </div>
  </li>
  <li class="list-choose">
    <input class="input-choose" type="checkbox" id="[ID]" />
    <label class="label-choose" for="[ID]">Magazine 2: IT</label>
    <div class="subtitle">
      <span class="categoryname" style="display: none">No category<span style="display: none">|All categorys</span></span>
    </div>
  </li>
</ul>

【参考方案2】：

在您的情况下，您使用 indexOf 来查找第一次出现，而不是完全匹配。

如this post 所示，您必须使用严格比较。

在您的脚本中，替换：

 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);

由

if (value === $(this).toggle($(this).text().toLowerCase())