jquery .find to get the text in a <li>

Question

So I have a series of 2 nested ul's. When you click on the text (which is in an a tag) in the li, my page makes that editable and adds a save button. clicking the save button needs to give me back the new text inside that li and the id of that li. The id is not a problem. I'm trying to use jQuery's .find to select that anchor tag (which is successful) but i can't seem to get the text from it.

Here is an example of the first list and it's sublists.

<ul class='lists'>
  <li class='list1'>
    <a class='a list' id='list1'> List 1 Name</a>
    <img id='savelist1id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
    <ul class='sublists'>
      <li class='sub1'>
        <a class='a sub' id='sub1id'> Sub 1 Name</a>
        <img id='savesub1id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
      </li>
      <li class='sub3'>
        <a class='a sub' id='sub2id'> Sub 2 Name</a>
        <img id='savesub2id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
      </li>
      <li class='sub2'>
        <a class='a sub' id='sub3id'> Sub 3 Name</a>
        <img id='savesub3id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
      </li>
    </ul>
  </li>
</ul>

Here's the code for identifying which save button you clicked.

function SaveName(parentid){
  $('li').find('a').each(function(){
    if (this.id == parentid){
      alert(this.id+' '+this.text)
      }
  }
});

I am wanting this.text to show me the text inside the anchor tags. Help, please?

=========================================================== Edit:

Please excuse this post. The problem was that I was using Jeditable and didn't know that it would put in a form in place of the text, so anything that would call text wouldn't work. Sorry.

Answer 1

simply use $(this).text() instead of this.text

To be honest, I don't understand the logic behind this function, because your function could have been written as:

function SaveName(parentid) {
     alert($('li a#' + parentid).text();
  }
});

Or may I suggest an alternative way of doing what you intented:

<ul class='lists'>
  <li class='list1'>
    <a class='a list' id='list1'> List 1 Name</a>
    <img id='savelist1id' onClick="SaveName(this)" src='save.jpg'>
    <ul class='list1subs'>
      <li class='sub1'>
        <a class='a sub' id='sub1id'> Sub 1 Name</a>
        <img id='savesub1id' onClick="SaveName(this)" src='save.jpg'>
      </li>
      <li class='sub3'>
        <a class='a sub' id='sub2id'> Sub 2 Name</a>
        <img id='savesub2id' onClick="SaveName(this)" src='save.jpg'>
      </li>
      <li class='sub2'>
        <a class='a sub' id='sub3id'> Sub 3 Name</a>
        <img id='savesub3id' onClick="SaveName(this)" src='save.jpg'>
      </li>
    </ul>
  </li>
</ul>

Javascript:

function SaveName(element) {
   alert($(element).prev("a").text());
}

Answer 2

Remove the inline handlers, bad karma.

$(document).ready(function(){
   $('.list1subs > li').find('img').bind('click', function(e){
      var $this = $(this);
      alert($this.siblings('a').text());
   });
});

Answer 3

Ok, so when I clicked on the field, I was using Jeditable to make the field edit in place. Clearly I didn't understand what this doing, because it inserts a form using what you supply. This is why whatever.text() was coming back blank. It wasn't counting the form as text, so it skipped it.