如何使用 jquery 從過濾列表中獲取可見項目的數量？

Question

我有一個包含 4 個 div 的列表和一個用於使用 jquery 過濾列表的輸入字段。 我需要的是在“keyup”功能上顯示/計算過濾結果的數量。 我正在使用“大小”函數來獲取結果的總數。

但是我沒有得到正確數量的結果，我無法修復它。

這是我的代碼：

 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 在這里

Answer 1

您可以使用:visible計數

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

或者你可以檢查 store-blobk 沒有 hidden-store 類

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

檢查下面的工作代碼片段

 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>