CODEWITHSUNDEEP
javascriptjquery
tanya
tanya

Reputation: 2985

changing class of main <li> tag only

I have the following unorderered list code which displays the list below:

<ul>
  <li name="EMI7428"><ins class="jstree-icon2">&nbsp;</ins><a href="#"><ins class="jstree-icon2">&nbsp;</ins>organ</a>
  <ul>
  <li name="EMI7436"><ins class="jstree-icon2">&nbsp;</ins><a href="#"><ins class="jstree-icon2">&nbsp;</ins>sub organ1</a>
  <ul>
  <li name="EMI8217"><ins class="jstree-icon2">&nbsp;</ins><a href="#"><ins class="jstree-icon2">&nbsp;</ins>sub organ2</a>
  <ul> 
  <li name="EMI8224"><ins class="jstree-icon2">&nbsp;</ins><a href="#"><ins class="jstree-icon2">&nbsp;</ins>sub organ3</a>
  <ul>
  <li name="EMI7428"><ins class="jstree-icon2">&nbsp;</ins><a href="#"><ins class="jstree-icon2">&nbsp;</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.

Upvotes: 0

Views: 190

Answers (2)

soju
soju

Reputation: 25312

Take a look here : http://api.jquery.com/child-selector/

li[name='"+emi_id+"'] > ins

Upvotes: 2

Jamie Dixon
Jamie Dixon

Reputation: 53991

I think the selector you want is:

$j("li[name='"+emi_id+"'] > ins")

The > symbol selects all elements that are a direct descendent of the li and not subsiquent non-direct child elements.

Upvotes: 5

Related Questions