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.

Solution 1

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.

Solution 2

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());
}

Solution 3

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());
   });
});

Comments

[Chris]

i have tried that. i also tried it again after your response and it still gave me nothing (an empty string?).

[jAndy]

siblings() is more reliable just in case he changes the markup

[Chris]

i also tried the alternatives you suggested. i still got nothing for the .text(). would it make a difference that using firebug i can see that there is an inline form that is added by jquery when the field becomes editable?

[Chris]

the problem with this solution is that there are a variable (and possibly infinite) number of lists and subs within those lists. i am using python and HTML_TMPL, so i can use TMPL_LOOPS but i'd rather avoid that if possible. i'll give it a shot either way.

[Chris]

i'm dumb. the UL's have consistent classes. the id on the sublists changes with the sublist id, but the classes are always 'lists' and 'sublists'

[Chris]

it also still appears to be giving me an empty string in response to $this.siblings('a').text()