I have the following unorderered list code which displays the list below:
<ul>
<li name="EMI7428"><ins class="jstree-icon2"> </ins><a href="#"><ins class="jstree-icon2"> </ins>organ</a>
<ul>
<li name="EMI7436"><ins class="jstree-icon2"> </ins><a href="#"><ins class="jstree-icon2"> </ins>sub organ1</a>
<ul>
<li name="EMI8217"><ins class="jstree-icon2"> </ins><a href="#"><ins class="jstree-icon2"> </ins>sub organ2</a>
<ul>
<li name="EMI8224"><ins class="jstree-icon2"> </ins><a href="#"><ins class="jstree-icon2"> </ins>sub organ3</a>
<ul>
<li name="EMI7428"><ins class="jstree-icon2"> </ins><a href="#"><ins class="jstree-icon2"> </ins>sub organ4</a>
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</li>
</ul>
organ
sub organ1
sub organ2
sub organ3
sub organ4
When user clicks on a button, I would like to change the class of the <ins> tag for a particular <li> tag to be changed.
I am using the code below to change the class of the <ins> tag.
$j("li[name='"+emi_id+"'] ins").attr("class","jstree-icon2"); // set class to display new icon
It is working fine, except for the following error. if user selects the first <li> tag (EMI7428), all the <ins> tags inside that <li> tag (all the <ins> tags of the <ul> found inside that <li> tag) have their classes changed and this is not the behaviour i would like.
I would like only the class of the ins tags belonging to an <li> tag with a particular name to be changed and i don’t want the change to propagate to the inner <ul>.
I would really appreciate it if somebody could help me out with this.
I think the selector you want is:
The
>symbol selects all elements that are a direct descendent of the li and not subsiquent non-direct child elements.