Question

Hai i am having the following html list.

<ol id="queryList">
  <li id="queryLi1">
     <span class="contentParent">First Level</span>
      <ul class="content">
        <li id="innerList594" class="content">
             Second Level
              <ul class="content">
                    <li>
                        Third Level
                        <textarea id="text1" cols="3" style="width: 250px"></textarea>
                        <input id="button1" type="button"  value="Save" >
                   </li>
             </ul>
        </li>
      </ul>
    </li>
    <li id="queryLi2">
      <span class="contentParent">First Level</span>
      <ul class="content">
        <li id="innerList525" class="content">
              Second Level
              <ul class="content">
                    <li>
                        Third Level
                        <textarea id="text2" cols="3" style="width: 250px"></textarea>
                        <input id="button2" type="button" value="Save">
                   </li>
             </ul>
        </li>
      </ul>
    </li>
      .
      .
      .(etc.,)

In this list when i click on Save button1 i want to take its ascendant <li id="queryLi1"><span class="contentParent">
element. Same as for all the list items ..For example if i click Save button2 i want to take <li id="queryLi2"><span class="contentParent">..

I tried like this

 var ascende = $(this).closest('.contentParent');

but i didnt get it.. Can any one help me..

Answer 1

.contentParent is not a direct relative, you need to find the closest common parent and then traverse from there:

var ascende = $(this).closest('#queryLi1').find('.contentParent');

If you need to do this on many items, add a class name to the outer most LI and use a class selector instead of #queryLi1.

Alternatively, find a sibling and then traverse, f.ex:

var ascende = $(this).parents('ul').slice(-1).prev();