如何使用 jquery 从过滤列表中获取可见项目的数量？

Question

I have a list of 4 divs and an input field for filtering the list using jquery. What i need is to display/count the number of the filtered results on "keyup" function . I am using the "size" function to get the total number of the results.

However i 'm not getting the right number of results and i can't fix it.

Here's my code:

 var langMap = {} $('#search-stores-box').keyup(function(){ var valThis = $(this).val().toLowerCase(); var filteredWord = getLatinWord(valThis); var count = $('.storesList .store-block').size() - $('.storesList .hidden-store').size(); $('#count').text(count); if(filteredWord == ""){ $('.storesList .store-block').show(); $('.storesList .store-block').removeClass('hidden-store'); } else { $('.storesList .store-block').each(function(){ $('.storesList .store-block').addClass('hidden-store'); var text = $(this).text().toLowerCase(); text = getLatinWord(text); (text.indexOf(filteredWord) > -1 ) ? $(this).show() : $(this).hide(); }); } }); function getLatinWord(word){ return word.split('').map(function(character){ if (langMap[character]) { return langMap[character]; } return character; }).join(''); }

 .results-box { margin-bottom:10px; overflow:hidden; display:inline-block; } .search-area {margin-bottom:10px;} #count {display:inline-block;} .store-block { width:80%; margin-bottom:10px; padding:5px; background:#e5e5e5; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="results-box">Number of stores: <div id="count"></div> </div> <div class="search-area"> <input placeholder="Type a store name..." id="search-stores-box" type="text" /> </div> <div class="storesList"> <div class="store-block">Apple Store</div> <div class="store-block">Microsoft Store</div> <div class="store-block">Motorola Store</div> <div class="store-block">Nokia Store</div> </div>

JSFIDDLE HERE

Answer 1

you can get count using :visible

var count = $('.storesList  .store-block:visible').length;
$('#count').text(count);

OR you can check store-blobk with no hidden-store class

var count = $('.storesList  .store-block:not(.hidden-store)').length;
$('#count').text(count);

check below working code snippet

 var langMap = {} $('#count').text($('.storesList .store-block:visible').length); $('#search-stores-box').keyup(function(){ var valThis = $(this).val().toLowerCase(); var filteredWord = getLatinWord(valThis); if(filteredWord == ""){ $('.storesList .store-block').show(); $('.storesList .store-block').removeClass('hidden-store'); } else { $('.storesList .store-block').each(function(){ $('.storesList .store-block').addClass('hidden-store'); var text = $(this).text().toLowerCase(); text = getLatinWord(text); (text.indexOf(filteredWord) > -1 ) ? $(this).show() : $(this).hide(); }); } var count = $('.storesList .store-block:visible').length; $('#count').text(count); }); function getLatinWord(word){ return word.split('').map(function(character){ if (langMap[character]) { return langMap[character]; } return character; }).join(''); }

 .results-box { margin-bottom:10px; overflow:hidden; display:inline-block; } .search-area {margin-bottom:10px;} #count {display:inline-block;} .store-block { width:80%; margin-bottom:10px; padding:5px; background:#e5e5e5; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="results-box">Number of stores: <div id="count"></div> </div> <div class="search-area"> <input placeholder="Type a store name..." id="search-stores-box" type="text" /> </div> <div class="storesList"> <div class="store-block">Apple Store</div> <div class="store-block">Microsoft Store</div> <div class="store-block">Motorola Store</div> <div class="store-block">Nokia Store</div> </div>