Javascript 当jQuery.match（）从列表项返回部分匹配时，如何将结果限制为完全匹配？

我有一个jQuery过滤器函数，它搜索无序列表中的任何精确匹配项，如果找到，则删除该类。但是，某些列表项可能包含部分匹配的值，例如AI和AI道德。如果搜索人工智能，它将返回两者，如果搜索人工智能道德，它将只返回人工智能道德

我预计，如果用户搜索AI，它将只返回一个带有确切标签AI的项目，而不是AI

更新：我正在发布这个过滤器脚本的最新版本，因为我已经将.filter更改为.each，并对其进行了修改以便于阅读

        $(function () {
            $('#SelectBox-ByType').change(function () {
                let typeKey = $(this).val();
                if (typeKey) {
                    $('ul.tags').each(function (i, e) {
                        let typeValue = $(this).text();
                        if (typeValue.match(typeKey)) {
                            $(this)
                                .parents('.knowledgeBaseItemWrapper')
                                .removeClass('hideByType');
                        } else {
                            $(this)
                                .parents('.knowledgeBaseItemWrapper')
                                .addClass('hideByType');
                        }
                    });
                } else {
                    $('.knowledgeBaseItemWrapper')
                        .removeClass('hideByType');
                }
                parseItems.process();
            });
        });

我也试过了

if (typeValue === typeKey)

但是，这不起作用，因为列表可能很长，并且有许多不同的标记。一旦列表中的一项不匹配，即使存在正确的项，过滤器也会失败。至少在匹配方面，我得到了部分准确的结果

关于如何修改此过滤器，使其在列表中时仅返回精确匹配的问题，有何想法

更新： 到目前为止，答案集中在筛选ul中的每个li。这个当前函数没有这个问题，在其当前实现中，它可以很好地过滤ul中的所有li

问题是当单个li的内容以部分匹配开始时，如何解析它们

下面是HTML下拉菜单的部分列表：

    <div class="col-xs-12 col-md-6 form-group">
      <label for="SelectBox-ByType">Categories:</label> 
      <div class="select-input">
        <select name="SelectBox-ByType" id="SelectBox-ByType">
        <option value="" selected>Select a Category...</option>
        <option value="AI">AI</option>
        <option value="AI Bias">AI Bias</option>
        <option value="AI Ethics">AI Ethics</option>
        <option value="AI Facial Recognition">AI Facial Recognition</option>
        <option value="Antitrust">Antitrust</option>
        <option value="Augmented Reality">Augmented Reality</option>
        <option value="Big Tech">Big Tech</option>

尝试使用字符串方法，似乎就是您要查找的方法：

$(function () {
  $("#SelectBox-ByType").change(function () {
    let typeKey = $(this).val();
    if (typeKey) {
      $("ul.tags").filter(function (i, e) {
        let typeValue = $(this).text();
        if (typeValue.startWith(typeKey)) {
          $(this)
            .parents(".knowledgeBaseItemWrapper")
            .removeClass("hideByType");
        } else {
          $(this).parents(".knowledgeBaseItemWrapper").addClass("hideByType");
        }
      });
    } else {
      $(".knowledgeBaseItemWrapper").removeClass("hideByType");
    }
    parseItems.process();
  });
});

尝试使用字符串方法，似乎就是您要查找的方法：

$(function () {
  $("#SelectBox-ByType").change(function () {
    let typeKey = $(this).val();
    if (typeKey) {
      $("ul.tags").filter(function (i, e) {
        let typeValue = $(this).text();
        if (typeValue.startWith(typeKey)) {
          $(this)
            .parents(".knowledgeBaseItemWrapper")
            .removeClass("hideByType");
        } else {
          $(this).parents(".knowledgeBaseItemWrapper").addClass("hideByType");
        }
      });
    } else {
      $(".knowledgeBaseItemWrapper").removeClass("hideByType");
    }
    parseItems.process();
  });
});

您正在使用$ul.tags.filter。。。但这将匹配整个元素，而不是我认为您想要的单个元素

一旦您将ul.tags更改为ul.tags li，则每个标记都将处理单个元素，然后您可以使用==而不是匹配来测试它们：

$(function () {
  $("#SelectBox-ByType").change(function () {
    let typeKey = $(this).val();
    if (typeKey) {
      $("ul.tags li").filter(function (i, e) {
        let typeValue = $(this).text();
        console.log( `Testing whether ${typeValue} == ${typeKey}` );

        if (typeValue == typeKey) {
          console.log( "Yes, they match!" );
          $(this)
            .parents(".knowledgeBaseItemWrapper")
            .removeClass("hideByType");
        } else {
          $(this).parents(".knowledgeBaseItemWrapper").addClass("hideByType");
        }
      });
    } else {
      $(".knowledgeBaseItemWrapper").removeClass("hideByType");
    }
    parseItems.process();
  });
});

您正在使用$ul.tags.filter。。。但这将匹配整个元素，而不是我认为您想要的单个元素

一旦您将ul.tags更改为ul.tags li，则每个标记都将处理单个元素，然后您可以使用==而不是匹配来测试它们：

$(function () {
  $("#SelectBox-ByType").change(function () {
    let typeKey = $(this).val();
    if (typeKey) {
      $("ul.tags li").filter(function (i, e) {
        let typeValue = $(this).text();
        console.log( `Testing whether ${typeValue} == ${typeKey}` );

        if (typeValue == typeKey) {
          console.log( "Yes, they match!" );
          $(this)
            .parents(".knowledgeBaseItemWrapper")
            .removeClass("hideByType");
        } else {
          $(this).parents(".knowledgeBaseItemWrapper").addClass("hideByType");
        }
      });
    } else {
      $(".knowledgeBaseItemWrapper").removeClass("hideByType");
    }
    parseItems.process();
  });
});

您使用的过滤器显示：

将匹配的元素集减少为与选择器匹配的元素集 或者通过函数的测试

一旦你知道了，使用a===b的形式将得到精确的匹配。每个人都可以处理这些，或者你可以像第二个例子那样简单地使用它

这两种方法中的任何一种都可能更简单，但您的HTML不是从发布到工作的

注意：不清楚您是否要求在条件许可之前移除，因此我没有这样做：

$(this)
    .parents('.knowledgeBaseItemWrapper')
    .toggleClass('hideByType', false);
if (typeKey) {

$function{ $'SelectBox-ByType'。在'change'上，函数{ 让typeKey=$this.val； 如果键入键{ $'ul.tags'.filterfunctionindex{ 返回$this.text==typeKey； } .eachindex，元素{ 美元这个 .parents'.knowledgeBaseItemWrapper' .toggleClass'hideByType'，true； }; 解析项目。过程； }; }；您使用的过滤器显示：

将匹配的元素集减少为与选择器匹配的元素集 或者通过函数的测试

一旦你知道了，使用a===b的形式将得到精确的匹配。每个人都可以处理这些，或者你可以像第二个例子那样简单地使用它

这两种方法中的任何一种都可能更简单，但您的HTML不是从发布到工作的

注意：不清楚您是否要求在条件许可之前移除，因此我没有这样做：

$(this)
    .parents('.knowledgeBaseItemWrapper')
    .toggleClass('hideByType', false);
if (typeKey) {

$function{ $'SelectBox-ByType'。在'change'上，函数{ 让typeKey=$this.val； 如果键入键{ $'ul.tags'.filterfunctionindex{ 返回$this.text==typeKey； } .eachindex，元素{ 美元这个 .parents'.knowledgeBaseItemWrapper' .toggleClass'hideByType'，true； }; 解析项目。过程； };

---

}；谢谢@ROOT，这个答案很有帮助，但尽管它能有效地解析出AI和AI道德规范，但只有当正确的答案在列表中的第一位时，它才起作用。我将继续使用它，看看是否可以修改其他逻辑来正确过滤ul中的所有li。但是现在。startsWith是朝着正确方向迈出的一步。谢谢@ROOT，这个答案是helps，但尽管它有效地解析出AI和AI道德规范，但它只有在正确答案在列表中第一位时才起作用。我将继续使用它，看看是否可以修改其他逻辑以正确过滤ul中的所有li。但是现在。startsWith是朝着正确方向迈出的一步。这个答案和kmoser的答案都非常有用，而且都非常有用e给了我一些关于如何调试这个过滤器的想法。但是他们都没有解决这个问题，所以我还没有接受答案。这个答案和kmoser的答案都非常有用，并且给了我一些关于如何调试这个过滤器的想法。但是他们都没有解决这个问题，所以我还没有接受答案。请发布所有的答案e html与您的问题关联，这样我们可以更好地帮助您

---

TRL-M创建一个可复制的示例-请注意，添加到问题中的您的评论清楚地指出，此处需要针对ul和li。ROOT的回答表明他们的解决方案产生了不同的问题。请发布与您的问题相关的所有html，以便我们能更好地帮助您。您可以使用代码段编辑，CTRL-M创建一个可复制的示例-注意，您在问题中添加的注释清楚地指出，此处需要针对ul和li。ROOT的回答表明他们的解决方案产生了不同的问题。