javascript - jquery .find to get the text in a <li> - Stack Overflow

admin管理员组

文章数量:1342902

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.

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.

• javascript
• jquery
• find

Share Improve this question Follow edited Jun 1, 2010 at 18:37 Chris asked Jun 1, 2010 at 17:38 ChrisChris 2,73566 gold badges2727 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

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

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 ing back blank. It wasn't counting the form as text, so it skipped it.

本文标签： javascriptjquery find to get the text in a ltligtStack Overflow