这是一个jsfiddle：https://jsfiddle.net/m6vxgg0m/15/
控制台日志显示输出。
我一直在尝试使用jQuery获取数组中字符串的出现次数。我用来检查数组的每个索引中是否存在字符串值的循环似乎是正确的。我不确定为什么它不能正常工作。我从来没有得到正确的计数器值。如果我将字符串保留在文本字段中并且我继续按Enter键，即使我在keyup事件内将计数器设置回0，计数器也会继续增加。如果数组中出现两次字符串，则计数器应始终显示值2.但它不会。非常沮丧。
JS：
$(function(){ keywordSearchFeature() });
function keywordSearchFeature(){
// Selector Variables
var inputSel = $('#search-term');
var noticeLblSel = $('.searchInstance');
var contentSel = $('.RadGrid.RadGrid_Default.mydatagrid .rgMasterTable tr');
// Functional Variables
var keywordVal;
var keywordValL; // keywordVal lowercase
var keyCounter = 0; // counter
var cellValues = []; //
var cellValuesL = []; // cellValues lowercase
// Type keyword
inputSel.on('keyup', function(e){
// Reset Counter
keyCounter = 0;
// Keyword Value
keywordVal = $(this).val();
// Keyword Lowercase Value
keywordValL = keywordVal.toLowerCase();
// console.log(keywordValL);
// Clear notice label when retyping
noticeLblSel.text('');
// Enter Key
if (e.which == 13) {
if(keywordValL != null && keywordValL != '' && keywordValL.length > 3){
console.log('ENTER KEY CLICKED: Value entered is: ' + keywordValL);
// Store content in arraykeyinstances[]
contentSel.each(function(i,tr){
var tdLines = $('td',tr).map(function(i,td){
// Get each cell string, and trim whitespace
var tdCellContent = $(td).text().trim();
// console.log(tdCellContent);
// Push each cell value to array
cellValues.push(tdCellContent);
cellValuesL.push(tdCellContent.toLowerCase());
});
});
// console.log(cellValues);
console.log(cellValuesL);
for (var i = 0; i < cellValuesL.length; i++) {
if (cellValuesL[i] == keywordValL) {
keyCounter++;
}
}
console.log(keyCounter);
// Notice label text
if(keyCounter > 0) {
noticeLblSel.text('Instance 1 of ' + keyCounter + ' found on this page.');
} else {
noticeLblSel.text('No instances for "' + keywordVal + '" found.');
}
} else {
noticeLblSel.text('Please enter 4 or more characters.');
}
}
});
// Click Events
//$(document).on('click','.btn-searchnext',function(){});
//$(document).on('click','.btn-searchprev',function(){});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formholder searchkeywordholder">
<div class="form_inner">
<div class="formrow form-col-1" tabindex="0">
<div id="find-in-page">
<div class="fielditem searchfielditem">
<input type="text"
id="search-term"
placeholder="Type in the phrase to search and click Next..."
title="Enter Search Phrase"
class="text searchfield"
aria-label="Search Keyword Field" />
<button id="next"
class="button bttn-clear btn-searchnext"
title="Next"
aria-label="Search Next Button">
Next
</button>
<button id="prev"
class="button bttn-find btn-searchprev"
title="Previous"
aria-label="Search Previous Button">
Previous
</button>
</div>
<label id="labelResult" class="searchInstance"></label>
</div>
</div>
</div>
</div>
<div class="RadGrid RadGrid_Default mydatagrid staticheaders nostripes" id="ctl00_MainContent_customProjectAssets_gridItems" tabindex="0">
<div class="rgDataDiv" id="ctl00_MainContent_customProjectAssets_gridItems_GridData">
<table class="rgMasterTable rgClipCells rgClipCells" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00">
<tbody>
<tr class="groupinghighlight" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00__0">
<td valign="middle">
<div>
</div>
</td>
<td>
<div>
<div>
<div id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_divChildAssetStyle">
Antenna B1
</div>
</div>
</div>
</td>
<td>
Equipment and Materials
</td>
<td>
C2 Equipment
</td>
<td>
Antenna
</td>
<td>
Basic
</td>
<td>
B1
</td>
<td>
<div class="rating_general rating_yellow" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_divRating" title="Asset's Rate">
0.36
</div>
</td>
<td align="center">
<span class="aspNetDisabled"><input disabled="disabled" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_checkboxOverride" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl04$checkboxOverride" type="checkbox"></span>
</td>
<td>
<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_spanAssetTag" title="Incident Response/Recovery">IRR</span>
</td>
<td align="center">
<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_spanClassificationLevel" title="UNCLASSIFIED">U</span>
</td>
<td align="center">
<input id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_checkboxDelete" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl04$checkboxDelete" onclick="$.onCheckDeleteChange('0');" type="checkbox">
</td>
</tr>
<tr class="groupinghighlight" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00__1">
<td valign="middle">
<div>
</div>
</td>
<td>
<div>
<div style="width: 200px; margin: 0 auto;">
<div id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_divChildAssetStyle">
Content 1
</div>
</div>
</div>
</td>
<td>
This is content
</td>
<td>
My text
</td>
<td>
lorem ipsum dolor
</td>
<td>
sit amet
</td>
<td></td>
<td>
<div class="rating_general rating_orange" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_divRating" title="Asset's Rate">
0.56
</div>
</td>
<td align="center">
<span class="aspNetDisabled"><input disabled="disabled" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_checkboxOverride" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl05$checkboxOverride" type="checkbox"></span>
</td>
<td>
<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_spanAssetTag" title="No Asset Tag Assigned"></span>
</td>
<td align="center">
<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_spanClassificationLevel" title="UNCLASSIFIED">U</span>
</td>
<td align="center">
<input id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_checkboxDelete" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl05$checkboxDelete" onclick="$.onCheckDeleteChange('1');" type="checkbox">
</td>
</tr>
<tr class="rgRow" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00__2">
<td valign="middle">
<div>
</div>
</td>
<td>
<div>
<div style="width: 200px; margin: 0 auto;">
<div class="iconGridSubordinateArrow" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_divChildArrowImage" style="float: left; width: 17px;"></div>
<div id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_divChildAssetStyle" style="float: left; width: 180px;">
equivalent
</div>
</div>
</div>
</td>
<td>
People
</td>
<td>
Individuals
</td>
<td>
lorem
</td>
<td>
ipsum
</td>
<td></td>
<td>
<div class="rating_general rating_yellow" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_divRating" title="Asset's Rate">
0.44
</div>
</td>
<td align="center">
<span class="aspNetDisabled"><input disabled="disabled" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_checkboxOverride" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl06$checkboxOverride" type="checkbox"></span>
</td>
<td>
<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_spanAssetTag" title="No Asset Tag Assigned"></span>
</td>
<td align="center">
<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_spanClassificationLevel" title="UNCLASSIFIED">U</span>
</td>
<td align="center">
<input id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_checkboxDelete" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl06$checkboxDelete" onclick="$.onCheckDeleteChange('2');" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
答案 0 :(得分：1)
首先，每次点击输入时keyCounter增加的原因是因为您没有将cellValuesL重置为keyup事件处理程序中的空数组。这意味着在第一次按Enter键后，将解析contentSel表，并将36个文本值推送到cellValuesL。下次您按Enter键时，会再次解析contentSel并再次将相同的36个值推送到cellValuesL，以便cellValuesL.length现在为72.相同的36个值会被推送到{{1每次按下回车键。
解决此问题的一种方法是将cellValuesL移至var cellValuesL = [];事件处理程序中。但是，更好的解决方案是将构建keyup数组（cellValuesL）的代码移动到contentSel.each事件处理程序之外。由于表中的文本值永远不会改变，因此每次用户按下回车键时，从表中获取文本并构建新数组是没有意义的。
关于在keyup数组中出现两次字符串的第二点，我认为您必须对代码检查的内容感到困惑。您的代码循环遍历cellValuesL中的每个值，并且对于该数组中的每个元素，等于较低的用户输入，cellValuesL会递增。在您的示例中，keyCounter中没有两个元素相等，因此循环不可能产生多个匹配。我假设您必须要检查cellValuesL 中的每个元素是否包含较低的用户输入。如果这是所需的行为，则需要将条件更新为以下内容：
cellValuesL使用Array.prototype.filter和Arrow Function来实现与上述代码相同的更现代，更优雅的方式：
for (var i = 0; i < cellValuesL.length; i++) {
if (cellValuesL[i].indexOf(keywordValL) > -1) {
keyCounter++;
}
}
最后，我想建议您的JavaScript代码可以清理一下。以下是一个不使用任何ES6语言功能的示例：
keyCounter = cellValuesL.filter(val => val.indexOf(keywordValL) > -1).length;
我还创建了一个示例fiddle。