Question

如果在该div内的div.candidate-single内找不到输入，我已经有了这个脚本（应该）隐藏整个p.skills-list。因此，该脚本仅搜索p.skills-list元素，如果找不到文本，则应隐藏.candidate-single。这是脚本和相关的html。

我遇到的问题是，如果找不到搜索字符串（#candidate-skills），我无法隐藏整个.candidate-single，它只会隐藏{{1 }}

strong.skills-list

示例列表项HTML

$(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);
    });
  });
});

Answer 1

隐藏并显示所有候选单 - 而不是与每个循环相关的候选单。试试这个：

＆＃13;

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

＆＃13;

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

1 个答案: