javascript - 将不同的 DOM 元素隐藏到通过 jquery 过滤的元素

Question

如果在 p.skills-list 中找不到输入，我有这个脚本(应该)隐藏整个 div.candidate-single分区因此，脚本仅搜索 p.skills-list 元素，如果未找到该文本，则应隐藏 .candidate-single。这是脚本和相关的 html。

我遇到的问题是，如果找不到搜索字符串 (#candidate-skills)，我无法隐藏整个 .candidate-single，它只会隐藏 strong.skills-list

$(document).ready(function() {
    // sets event listener
  $("#candidate-skills").keyup(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 class="col-md-4 form-group">
                        <label>Core Skills: </label></br>
                        <input type="text" id="candidate-skills" class="candidate-input form-control">
                        </div>   
<div class="row">
    <div class="panel panel-default candidate-single">
    <h6>PHP Developer</h6>
    <p>Location: Everywhere</p>
    <p>Core Skills: <strong class="skills-list">PHP, python, c#, html</strong></p>
    </div>
    </div>

Answer 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);
});