Question

I have a Div with contents

<div id="dv">

<ul><li><a class="html">abcd</a></li></ul>

<ul><li><a class="bold">cdef</a></li></ul>

<ul><li><a class="bold">xyz</a></li></ul>

</div>

I want to display none second and 3rd ul dynamically. How can I do that ?

Answer 1

You can find all the children of the div, hide them, then find the ul containing the li with class "html" and show that ul:

$("#dv").children('ul').hide().find('li.html').closest('ul').show();

Live Example | Source

What that does:

• $("#dv") – Finds the relevant div
• .children('ul') – Finds its children that are ul elements
• .hide() – Hides them
• .find('a.html') – Finds any a elements withinin those uls that have class "html"
• .closest('ul') – Gets the ul containing that a element
• .show() – Shows it