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

은 두 줄 이상이 필요합니다 .

데모 :

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

귀하의 기능을 살펴보면 필터링이 완료된 것으로 가정하고 자녀에게 결과를 볼 수 있습니다. 검색 결과 'a'에 대한 예제를 살펴보면 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

1가 명시 적으로 하나의 D1 (클래스 문자-A) JQ를 사용하여 자식 요소 (클래스 브랜드 항목)를 숨 깁니다. 여기

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