Как я могу получить количество видимых элементов из отфильтрованного списка с помощью jquery?

Question

У меня есть список из 4 делителей и поле ввода для фильтрации списка с помощью 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 без класса скрытого хранилища

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>