Wie filtere ich die Liste der Elemente mit Data-Rel-Tags

Question

Wie können wir jQuery verwenden, um die Liste der Elemente basierend auf der ausgewählten Option aus der Dropdown-Liste zu filtern?

Jedes der Elemente hat eine Daten rel Tag

<select id="lstkbCategory" data-placeholder="Choose a Category"> 
    <option> --show all-- </option> 
    <option>close</option> 
    <option>general</option> 
    <option>verification</option> 
    <option>welcome</option> 
</select> 
<br> 
<div class="kb-items"> 
    <a class="kb-item" href="#" data-rel="verification">xxx</a> 
    <a class="kb-item" href="#" data-rel="close">xxx</a> 
    <a class="kb-item" href="#" data-rel="welcome">444</a> 
    <a class="kb-item" href="#" data-rel="welcome">aaa</a> 
    <a class="kb-item" href="#" data-rel="general">bbb</a> 
    <a class="kb-item" href="#" data-rel="general">ggg</a> 
    <a class="kb-item" href="#" data-rel="general">qqq</a> 
    <a class="kb-item" href="#" data-rel="general">sos</a> 
</div> 

Answer 1

versuchen

$("#lstkbCategory").change(function() { 
    var value = $(this).val(); 

    $(".kb-items .kb-item").show(); 

    if (value !== '-- show all --') { $(".kb-items .kb-item[data-rel !='" + value + "']").hide(); } 
}); 

Answer 2

Sie können eine Attributselektor wie folgt verwenden:

var $relElements = $("[data-rel='" + selectedOption + "']"); 

(mehr über Attributselektoren hier: https://api.jquery.com/category/selectors/attribute-selectors/)

Es gibt auch eine Filtermethode, die Sie ein Element-Gruppe verwenden können, verengen:

$(".kb-item").filter("[data-rel='" + selectedOption + "']"); 

(https://api.jquery.com/filter/)

Answer 3

$('#lstkbCategory').change(function() { 
 

 
    var value = $('option:selected', this).text();//get the text of selected option 
 

 
    $('.kb-items a').filter(function(i, v) { 
 
    $(v).removeClass('red') 
 
    return $(v).attr('data-rel') == value//compare the option with the data-rel 
 

 

 

 
    }).addClass('red')//addClass to anchor with matching data-rel to value 
 

 
})

.red { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="lstkbCategory" data-placeholder="Choose a Category"> 
 
    <option>--show all--</option> 
 
    <option>close</option> 
 
    <option>general</option> 
 
    <option>verification</option> 
 
    <option>welcome</option> 
 
</select> 
 
<br> 
 
<div class="kb-items"> 
 
    <a class="kb-item" href="#" data-rel="verification">xxx</a> 
 
    <a class="kb-item" href="#" data-rel="close">xxx</a> 
 
    <a class="kb-item" href="#" data-rel="welcome">444</a> 
 
    <a class="kb-item" href="#" data-rel="welcome">aaa</a> 
 
    <a class="kb-item" href="#" data-rel="general">bbb</a> 
 
    <a class="kb-item" href="#" data-rel="general">ggg</a> 
 
    <a class="kb-item" href="#" data-rel="general">qqq</a> 
 
    <a class="kb-item" href="#" data-rel="general">sos</a> 
 
</div>