Скрыть различные элементы DOM для фильтруемых элементов через jquery

У меня есть этот скрипт, который (должен) скрыть весь div.candidate-single если вход не найден внутри p.skills-list внутри этого div. Таким образом, скрипт ищет только этот p.skills-list и должен скрывать .candidate-single если текст не найден. Здесь сценарий и соответствующий html.

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу скрыть весь.candidate-single, если строка поиска (#candidate-skills) не найдена, она скрывает только список strong.skills-list

$(document).ready(function() {
 // sets event listener
 $("#candidate-skills").*****(function() {

 //creates variables
 var searchTerm = $("#candidate-skills").val();
 var listItem = $('.skills-list');
 var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

 console.log(searchSplit);
 console.log(listItem);

 //extends :contains to be case insensitive
 $.extend($.expr[':'], {
 'containsi': function(elem, i, match, array)
 {
 return (elem.textContent || elem.innerText || '').toLowerCase()
 .indexOf((match[3] || "").toLowerCase()) >= 0;
 }
});

 // does the hiding of stuff etc

 // this one hides the ones that aren't relavent
 $(".skills-list").not(":containsi('" + searchSplit + "')").each(function(e) {
 $(this).addClass('is-hidden');
 setTimeout(function() {
 $('.candidate-single').addClass('is-hidden');
 }, 1);
 });

 // makes sure the correct ones are shown
 $(".skills-list:containsi('" + searchSplit + "')").each(function(e) {
 $(this).removeClass('is-hidden');
 setTimeout(function() {
 $(".candidate-single").removeClass('is-hidden');
 }, 1);
 });
 });
});

Пример элемента списка HTML

<div>
 <label>Core Skills: </label>
 
 </div> 
<div>
 <div>
 <h6>PHP Developer</h6>
 <p>Location: Everywhere</p>
 <p>Core Skills: <span>PHP, python, c#, html</span></p>
 </div>
 </div>
1 ответ

Вы скрываете и показываете весь кандидат-сингл, а не тот, который имеет отношение к каждому циклу. Попробуй это:

// this one hides the ones that aren't relavent
$(".skills-list").not(":containsi('" + searchSplit + "')").each(function(e) {
 var $skillsList = $(this);
 $skillsList.addClass('is-hidden');
 setTimeout(function() {
 $skillsList.closest('.candidate-single').addClass('is-hidden'); // gets the closest parent to the skills list
 }, 1);
});

// makes sure the correct ones are shown
$(".skills-list:containsi('" + searchSplit + "')").each(function(e) { 
 var $skillsList = $(this);
 $skillsList.removeClass('is-hidden');
 setTimeout(function() {
 $skillsList.closest(".candidate-single").removeClass('is-hidden');
 }, 1);
});

licensed under cc by-sa 3.0 with attribution.