Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

Answer 1

您还需要两行：

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

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

演示：

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

这里第一次使用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

通过查看您的功能，我认为过滤已完成，您可以在儿童中看到结果。让我们根据您的搜索结果举例来说，HTML中的结果是：

ListView

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

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

Answer 4

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery实时过滤列表父和子

4 个答案: