jQueryライブのフィルタリングリストの親と子供

Question

私はこの1つに固執しています。私は入力フィールドを持っており、結果をフィルタリングしたい。私が今使っている次の関数。私は次のことをやりたい

$('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

は、次の2つのより多くの行が必要。

デモ：ここ

$('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

あなたの関数を見ると、そのフィルタリングが行われたと仮定したものがあり、子供の結果を見ることができます。

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

一つが隠されており、他の2が表示されます：「」、HTMLでの結果であるのは、あなたの検索に基づいて例を見てみましょう。今のコードは、それらをチェックすることです：

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

parents()方法が一致する親（複数可）を見つける隠されたまたは示された要素の：

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

Answer 3

$('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>

Answer 4

第一明示的JQを使用して1、D1（クラス文字-a）の子要素（クラスのブランド・アイテム）を非表示にします。ここで

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