通过jQuery获取父李文本

Question

I need alert thisparenttext in following code by clicking on clickedlicontent

<script>
 $("#one").live("click",function(){
 var partxt=$(this).parent().parent().text();
 alert(partxt);
 });
</script>
<ul>
    <li>thisparenttext<ul><li id="one">clickedlicontent</li></ul></li>
    <li>bb</li>
</ul>

In other word, I want take only the text of first parent of clicked li, not all its all html codes.

Answer 1

What you need to do is clone the element, remove all it's children and use $.text() to get the remaining text:

$("#one").live("click", function(){
    var partxt = $(this).parent().parent().clone().children().remove().end().text();
    alert(partxt);
});

This takes the parent of the parent and clones it. This is so that when we do .children().remove() it doesn't affect the displayed elements. .end() will "re-select" the parent of the parent of $(this) and .text() gets the text.

Answer 2

You can try this.

$("#one").live("click",function(){
     //It will filter parent li's content to get only text node and get its text
     var partxt = $(this).parent().parent().contents().filter(function(){
                       //return true only if text node
                       return this.nodeType == 3;
                  }).text();
     alert(partxt);
});

Working demo - http://jsfiddle.net/TpdfA/

Side Note:

If you are using jQuyer ver 1.7+ then it is adviceable to use on else you can use delegate instead of using live .

Using delegate()

//Instead of document you can specify any parent container of dynamic elements
$(document).delegate("#one", "click",function(){
     //It will filter parent li's content to get only text node and get its text
     var partxt = $(this).parent().parent().contents().filter(function(){
                       //return true only if text node
                       return this.nodeType == 3;
                  }).text();
     alert(partxt);
});

Using on() (jQuery ver 1.7+)

//Instead of document you can specify any parent container of dynamic elements
$(document).on("click", "#one",function(){
     //It will filter parent li's content to get only text node and get its text
     var partxt = $(this).parent().parent().contents().filter(function(){
                       //return true only if text node
                       return this.nodeType == 3;
                  }).text();
     alert(partxt);
});

References:

• delegate() - http://api.jquery.com/delegate/
• on() - http://api.jquery.com/on/

Answer 3

This turned into an interesting chain

Dem0: http://jsfiddle.net/fut7y/

$('#one').click(function() {
    var topLevelText = $(this).parent().parent().clone().children().remove().end().text();

    alert(topLevelText);
});​

Answer 4

Get the HTML, turn it into a string, and split on first HTML start tag and then select first value of array to get the first text string.

$(document).on("click", "#one", function(){
   var partxt = new String($(this).parent().parent().html()).split('<')[0];
   alert(partxt);
});​

FIDDLE