I am working on setting up a way to select or filter a list using radio groups of "modifiers" or attributes. The lists I'm filtering can be multi-level nested ul-li.
My eventual goal is to have only the intended list items with the correct attribute or text show, the others would be hidden.
In my example, I'm having issues with selecting only what I want. It's selecting the whole nested ul if there is an li that contains the text I'm looking for.
Here's a jsFiddle I made
$('.refine').on('change', 'input[type="radio"]', function() {
var sortattr = $(this).val();
$(".mylist li:contains('" + sortattr + "')").each(function() {
$(this).addClass('here');
});
});
<form class="refine" role="form">
<input type="radio" value="left" name="modifiers" id="reflatleft">Left
<input type="radio" value="right" name="modifiers" id="reflatright">Right
<input type="radio" value="unspecified" name="modifiers" id="reflatunspecifed">Unspecified
</form>
<ul class="mylist">
<li>item misc header
<ul>
<li>item left</li>
<li>item right</li>
<li>item left</li>
<li>item unspecified</li>
<li>item somethings else</li>
</ul>
</li>
<li>item left</li>
<li>item right</li>
<li>item left</li>
<li>item unspecified</li>
<li>item somethings else</li>
</ul>
You just have to check whether there are any child elements in the <li>'s to be highlighted so just adding a if construct would solve the problem
$('.refine').on('change', 'input[type="radio"]', function() {
var sortattr = $(this).val();
$(".mylist li:contains('" + sortattr + "')").each(function() {
if($(this).children().length == 0){
$(this).addClass('here');
}
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments