如何使用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 HERE

Answer 1

您可以使用:visible

进行计数

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

或者您可以在没有隐藏商店类的情况下检查商店空白

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>