如何只搜索 HTML 列表中的特定 span 标签而不搜索所有列表项？ (jQuery)

Question

我的类别过滤器有问题。我创建了一个包含不同类别的下拉选择和一个包含标题和类别等信息的普通列表。如果用户在示例 "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" 它也会显示 "politics" 因为 IT 在这个词中 - 但这不是什么我想要 :D)。但我希望它只在 class "categoryname".

中查找 span 标签

Answer 1

在你的例子中，你使用的是 indexOf 来查找第一次出现，而不是精确匹配。

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

在您的脚本中，替换：

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

由

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

Answer 2

您的代码有几个问题：

遇到此类问题时，您应该学习如何调试，例如 console.log，以确保您的 selections 得到您想要的结果（删除注释以在动作）
您在这里无缘无故地使用 filter。 Filter returns 一个数组，根据参数函数 returns true 或 false 过滤基本数组。使用 jQuery 的 each 或纯 JS map
您可以在第一个 selection

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>

如何只搜索 HTML 列表中的特定 span 标签而不搜索所有列表项？ (jQuery)

How to search only for a specific span tag in a HTML list and not for all list items? (jQuery)

html

javascript

css

jquery

jquery-selectors