当jQuery .match()从列表项返回部分匹配时，如何将结果限制为精确匹配？
我有一个jQuery过滤器函数，它在无序列表中搜索任何精确匹配，如果找到，则搜索removesClass。然而，一些列表项目可能包含部分匹配的值，如AI和AI道德操守。如果搜索AI，则两者都会返回，如果搜索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)但是，这是行不通的，因为列表可能很长，并且有许多不同的标记。当列表中的某一项不匹配时，即使正确的项在那里，筛选器也会失败。至少有了.match()，我得到了部分准确的结果。
对于我如何修改这个过滤器，以便在列表中只返回一个完全匹配的过滤器，有什么想法吗？
更新：到目前为止，答案集中在过滤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>这是正在搜索的HTML的一个示例：
<div class="knowledgeBaseItemWrapper" id="id1529224">
<div class="knowledgeBaseItem standardContent">
<div class="summaryWrapper">
<div class="titleAnchor">...</div>
<div class="summary">...</div>
<ul class="tags">
<li class="tag">AI Facial Recognition</li>
<li class="tag">Data Privacy</li>
<li class="tag">Big Tech</li>
</ul>我需要的是一种解析内容的方法，我怀疑我的问题在于if语句匹配逻辑：
if (typeValue.match(typeKey))回答 3
Stack Overflow用户
发布于 2020-06-03 18:03:48
尝试使用.startWith() string方法，似乎是您正在寻找的方法：
$(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();
});
});Stack Overflow用户
发布于 2020-06-03 19:11:23
您使用的是$("ul.tags").filter(...)，但这将匹配整个<ul>，而不是我认为需要的单个<li>元素。
一旦将"ul.tags"更改为"ul.tags li"，each()将处理单个<li>元素，然后可以使用==而不是match()来测试它们：
$(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();
});
});Stack Overflow用户
发布于 2020-06-04 11:28:27
您使用的是filter()，它说：
“将匹配的元素减少到与选择器匹配或通过函数测试的元素集。
一旦您拥有了使用某种形式的a === b将得到精确的匹配，那么.each()就可以处理这些或您只需像第二个示例那样使用它。
这两种方法都可能更简单，但您的HTML不会发布。
注意:不清楚您是否需要在条件之前删除，所以我没有这样做：
$(this)
.parents('.knowledgeBaseItemWrapper')
.toggleClass('hideByType', false);
if (typeKey) {
$(function() {
$('#SelectBox-ByType').on('change', function() {
let typeKey = $(this).val();
if (typeKey) {
$('ul.tags').filter(function(index) {
return $(this).text() === typeKey;
})
.each(index, element) {
$(this)
.parents('.knowledgeBaseItemWrapper')
.toggleClass('hideByType',true);
});
parseItems.process();
});
});
$(function() {
$('#SelectBox-ByType').on('change', function() {
let typeKey = $(this).val();
if (typeKey) {
$('ul.tags').filter(function(index) {
return $(this).text()=== typeKey;
})
.parents('.knowledgeBaseItemWrapper')
.toggleClass('hideByType');
parseItems.process();
});
});
});
https://stackoverflow.com/questions/62179391
复制相似问题
腾讯云开发者
