Using jQuery to find list items containing specific text in nested lists

Question

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>

Ivan Doroshenko · Accepted Answer · 2014-04-01 17:50:27Z

2

Add default styles to li:

li{
    color: #000;
    font-weight: normal;
}

answered Apr 1, 2014 at 17:50

Ivan Doroshenko

9427 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

skywalker Over a year ago

One thing is needed also: $(".mylist li").removeClass('here'); when clicked input radio.

Martin54 · Accepted Answer · 2018-08-11 11:46:07Z

1

working solution

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

edited Aug 11, 2018 at 11:46

Martin54

1,9002 gold badges18 silver badges39 bronze badges

answered Apr 1, 2014 at 17:58

Sagi_Avinash_Varma

1,50912 silver badges23 bronze badges

3 Comments

user1572121 Over a year ago

Thanks!, Fiddle works like I want, now gotta see if it'll work in my project.

Sagi_Avinash_Varma Over a year ago

@user1572121 use .children() instead of .find("ul") its general and precise. i updated my answer accordingly

user1572121 Over a year ago

OK, that's not working for me in my project, your original did.

Mir Gulam Sarwar · Accepted Answer · 2014-04-01 17:51:21Z

0

at first create an array like below

var myArray=new Array();

then

pust your contents like below

myArray.push(item you want to push);

answered Apr 1, 2014 at 17:51

Mir Gulam Sarwar

2,6482 gold badges27 silver badges40 bronze badges

Comments

ajc · Accepted Answer · 2014-04-01 18:01:02Z

0

The reason why whole li is getting selected is because of ur selector.

Your current selector is '.mylist li'.

You code iterates to find the requested text, for eg. 'left' and it adds the css to the complete selector.

So instead of adding class to ".mylist li ul li" it adds the class to ".mylist li" hence the whole outer li gets highlighted.

You can use .has to iterate through the nested ul li

answered Apr 1, 2014 at 18:01

ajc

1,73514 silver badges36 bronze badges

Collectives™ on Stack Overflow

Using jQuery to find list items containing specific text in nested lists

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related