jQuery get .text() but not the text in span

Question

This is my jQuery part that makes my menu for my pages.

function fetchmenus() {
    $.getJSON('sys/classes/fetch.php?proccess=1', function(status) {
        // get line status
        $.each(status, function(i, item) {
            if (item.id == "1") {
                active = "class='active'";
                lastpageid = item.href;
            }
            else {
                active = "class='nonactive'";
            }
            $('<li id="' + item.href + '" ' + active + '><a href="#' + item.href + '">' + item.menuTitle + '<span class="menuspan" id="' + item.href + '"></span></a></li>').appendTo('#menuarea ul#mainmenu');

        });
    });
}

What I want to do is get the item.menuTitle in the <a but before the <span>.

Currently I do it on this way:

$('ul#mainmenu li').live('click', function(event) {
    //alert(this.id);
    $("li#" + lastpageid).removeClass();
    fetchpage(this.id);

    $("#largemenutop").html($(this).text());

    $("li#" + this.id).addClass("active");
    lastpageid = this.id;
});;

Is there a better way to do this?

its not clear to me what you are asking. are you looking for a better way to build up the html for the menu? Or to access the title of the anchor once the menu is built already? — Jeff, May 06 '11 at 15:02
Possible duplicate of [Using .text() to retrieve only text not nested in child tags](http://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags) — Stephan Weinhold, Dec 26 '16 at 09:19

score 23 · Answer 1 · edited Jan 22 '14 at 12:21

23

Nice solution Herman, though it can be reduced to something like this:

JS

$('li a').contents().filter(function() {
    return this.nodeType == 3;
}).text();

HTML

<li><a href="#">Apple<span>hi</span> Juice</a></li>

Will return Apple Juice

Fiddle: http://jsfiddle.net/49sHa/1/

edited Jan 22 '14 at 12:21

Muleskinner

14,150
19
58
79

answered May 06 '11 at 18:19

Gary Green

22,045
6
49
75

1

+1: This cleaner version made it easier for me to understand the solution – Ruan Mendes May 06 '11 at 18:32

score 9 · Accepted Answer · answered May 06 '11 at 14:57

9

Yes, you can select only the text contents of the element, like this:

 var text = '';
 $('a').contents().each(function(){
    if(this.nodeType === 3){
     text += this.wholeText;
    }
 });
 $("#largemenutop").html(text);

answered May 06 '11 at 14:57

Herman Schaaf

46,821
21
100
139

4

+1 Herman, good solution. Here's a [list of NodeTypes](http://code.stephenmorley.org/javascript/dom-nodetype-constants/) for anyone wondering what '3' means. – Town May 06 '11 at 15:10
I fixed it by using some of the code above. Now it looks like this and works, maybe not the cleanest. [code] $('ul#mainmenu li').live('click', function(event){ //alert(this.id); $("li#"+lastpageid).removeClass(); fetchpage(this.id); var text = ''; $('li#'+this.id+' a').contents().each(function(){ if(this.nodeType === 3){ text += this.wholeText; } }); $("#largemenutop").html(text); $("li#"+this.id).addClass("active"); lastpageid = this.id; }); [/code] – RussellHarrower May 06 '11 at 15:43

jQuery get .text() but not the text in span

2 Answers2

JS

HTML

Linked