jQuery实时过滤列表父和子

Question

我坚持这个;我有一个输入字段，想要过滤结果。我目前使用的以下功能;

$('input[type="text"]').keyup(function() {
  var that = this,
    $allListElements = $('ul.bare-list > li');

  var $matchingListElements = $allListElements.filter(function(i, li) {
    var listItemText = $(li).text().toUpperCase(),
      searchText = that.value.toUpperCase();
    return ~listItemText.indexOf(searchText);
  });

  $allListElements.hide();
  $matchingListElements.show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="brand-container">
  <dl class="brands-letter letter-a" data-letter="letter-a">
    <dt>A</dt>
    <dd>
      <ul class="bare-list">
        <li class="brand-item">item 1</li>
        <li class="brand-item">item 2</li>
        <li class="brand-item">item 3</li>
      </ul>
    </dd>
  </dl>
  <dl class="brands-letter letter-b" data-letter="letter-b">
    <dt>B</dt>
    <dd>
      <ul class="bare-list">
        <li class="brand-item">item 1</li>
        <li class="brand-item">item 2</li>
        <li class="brand-item">item 3</li>
      </ul>
    </dd>
  </dl>
</div>

我想做以下事情;当根据<input>字段的值进行过滤时，我想检查是否所有子项都设置为'display: none'。如果是这样，那么我想隐藏父.brands-letter。

有关如何处理此问题的任何提示？

Answer 1

你还需要两行：

$allListElements.parents('.brands-letter').hide();
$matchingListElements.parents('.brands-letter').show();

parents()方法将找到隐藏或显示元素的匹配父级。

演示：

$('input[type="text"]').keyup(function() {
  var that = this,
    $allListElements = $('ul.bare-list > li');

  var $matchingListElements = $allListElements.filter(function(i, li) {
    var listItemText = $(li).text().toUpperCase(),
      searchText = that.value.toUpperCase();
      
    return ~listItemText.indexOf(searchText);
  });

$allListElements.hide();
$matchingListElements.show();
//add this
$allListElements.parents('.brands-letter').hide();
$matchingListElements.parents('.brands-letter').show();


  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="brand-container">
  <dl class="brands-letter letter-a" data-letter="letter-a">
    <dt>A</dt>
    <dd>
      <ul class="bare-list">
        <li class="brand-item">item 0</li>
        <li class="brand-item">item 2</li>
        <li class="brand-item">item 3</li>
      </ul>
    </dd>
  </dl>
  <dl class="brands-letter letter-b" data-letter="letter-b">
    <dt>B</dt>
    <dd>
      <ul class="bare-list">
        <li class="brand-item">item 1</li>
        <li class="brand-item">item 2</li>
        <li class="brand-item">item 4</li>
      </ul>
    </dd>
  </dl>
</div>

<input type="text">

Answer 2

这里第1次使用JQ明确隐藏一个d1（class letter-a）子元素（class brand-item）。

// here expilicitly hide all letter-a list item
const $brandItems = $('.letter-a').find('.brand-item');
$($brandItems[0]).hide();
$($brandItems[1]).hide();
$($brandItems[2]).hide();

检查每个裸列表子元素是否显示无，如果所有子元素都显示无，则隐藏裸列表父类的父元素。

// Below code fulfil your requirement
const $bareLists = $('.bare-list');
$bareLists.each( (i, bareList) => {
    let hideFlag = true;
    const $brandItems = $(bareList).children();
    $brandItems.each( (j, brandItem) => {
        /* here checking for each child for display as none. if any child 
         does not has display as a none then it set hideFlag as a false.*/
        if ($(brandItem).css('display') !== 'none') {
            hideFlag = false;
        }
    });
    if (hideFlag) {
        let $parent = $(bareList).parent().parent();
        $parent.hide();
    }
});

Answer 3

通过查看您的函数，我假设过滤已完成，您可以在子项中查看结果。让我们根据您的搜索'a'进行示例，HTML中的结果是：

<div class='parent'>
  <div class='child1'> abcd </div>
  <div class='child2'> aef </div>
  <div class='child3' style='display: none'> bcd </div>
</div>

一个是隐藏的，另外两个是可见的。现在检查它们的代码是：

if($('.parent div').length > 0)
  $('.parent').show();
else
  $('.parent').hide();

Answer 4

$('input[type="text"]').keyup(function() {
  var that = this,
    $allListElements = $('ul.bare-list > li');

  var $matchingListElements = $allListElements.filter(function(i, li) {
    var listItemText = $(li).text().toUpperCase(),
      searchText = that.value.toUpperCase();
    return ~listItemText.indexOf(searchText);
  });

  $allListElements.hide();
  $matchingListElements.show();

 $('ul.bare-list').each(function() {
   if($(this).find('> li').length > 0)
      $(this).show();
   else
      $(this).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="brand-container">
  <dl class="brands-letter letter-a" data-letter="letter-a">
    <dt>A</dt>
    <dd>
      <ul class="bare-list">
        <li class="brand-item">item 1</li>
        <li class="brand-item">item 2</li>
        <li class="brand-item">item 3</li>
      </ul>
    </dd>
  </dl>
  <dl class="brands-letter letter-b" data-letter="letter-b">
    <dt>B</dt>
    <dd>
      <ul class="bare-list">
        <li class="brand-item">item 1</li>
        <li class="brand-item">item 2</li>
        <li class="brand-item">item 3</li>
      </ul>
    </dd>
  </dl>
</div>