如何只搜索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”，它也会显示“ political”，因为IT在此词中，但这不是我想要的：D）。但是我希望它只在类“ categoryname”中查找span标签。

Answer 1

您的代码有几个问题：

• 遇到此类问题时，您应该学习如何进行调试（例如，使用console.log进行调试），以确保您的选择满足您的要求（删除评论以使它们生效）
• 您无缘无故在这里使用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>

Answer 2

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

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

在您的脚本中，替换：

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

通过

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