• John

    Jquery hide / show question

    I have a list that looks like this:

    <span id="contacts_tab_contacts_list_list"> 
                    <li><span id="contact_35">John</span> 
                    </li> 
                    <li><span id="contact_36">Ron a</span> 
                    </li> 
                    <li><span id="contact_33">Ron b</span> 
                    </li> 
                    <li><span id="contact_34">35</span> 
                    </li> 
                    <li><span id="contact_39">33</span> 
                    </li> 
                    <li><span id="contact_37">66</span> 
                    </li> 
                    <li><span id="contact_38">77</span>
    ...
    </span>
    

    I have <input>one that I use to filter a list using jQuery. I am trying to do this using these two lines jQuery:

    $("#contacts_tab_contacts_list_list").children().hide();
    $("#contacts_tab_contacts_list_list:contains('" + searchValue + "')").show();
    

    So, for example, enter Roninto the search box will make contact_36and contact_33the only visible elements in the list. part works hide(). show()does not work.

    What am I doing wrong? (Assume that searchValuehas the correct value, in this case Ron)

    Is there a better way to do this?

    Thank!

    +3
    source share
    1 answer

    Try narrowing your choices to nested elements span:

    $("#contacts_tab_contacts_list_list li span:contains('" + searchValue + "')").show();
    
    +5
    source

    All Articles