javascript - 当搜索值是动态的时，如何获取包含某些文本的 div 的计数？

Question

我想允许用户输入搜索字符串，并且我想返回找到该搜索项的次数。如果我将搜索值硬编码到“包含”方法中，我可以让它工作，但是一旦我将搜索值存储到变量中，它就不再工作了。

HTML：

<div class="myTest">this</div>
<div class="myTest">this</div>
<div class="myTest">that</div>
<div class="myTest">that</div>
<div class="myTest">this</div>
<div id="howMany"></div>

JAVASCRIPT：

$(function() {
    var myVal= "that";  
    var existingList = $("div:contains(myVal) + .myTest").length;
    $("div[id*='howMany']").html(existingList);
})

Answer 1

您的代码中有一些错误：

• +在 jQuery 选择器中并没有做你认为它做的事情
• 您在选择器中包含字符串myVal而不是值myVal
• 用于#查找具有给定 id 的元素

您可以使用搜索

var existingList = $('div.myTest:contains("'+myVal+'")').length;

但这不适用于包含双引号的字符串。对于任何类型的字符串，我宁愿建议

var existingList = $('div.myTest').filter(function(){
    return $(this).text().indexOf(myVal)>=0;
}).length;

要发布找到的结果数，请使用

$("#howMany").html(existingList);