How to use jQuery to select text inside anchor tags

StackOverflow https://stackoverflow.com/questions/10918784

Question

I want to select the a tag and display its text when clicked.

In another word, when I click the first link - "One", I want to display its text "One" using alert.

When I click the second link - "Example", I want to display the text "Example" using alert.

<body>
    <div id="tree">
        <ul>
        <li><a target="_blank" href="one.html">One</a></li>
        <li class="folder expnded"><a target="_blank" href="two.html">Examples</a></li>
        </ul>
    </div>    
    <div id="display"></div>    
</body>

Update 1:

Thank everyone for answering. What I really want to do is that I need to create a tree structure and when I click tree leaf node, I have to display name of that leaf node.

I created tree structure using jQuery DynaTree, but jQuery selectors is not working for me in the code above.

I'm not able to select tags or any other elements inside the div tag.

Below is the tree structure:

enter image description here

THIS IS MY FULL HTML CODE (above is just a sample code)

<html>
<head>
<!-- Include the required JavaScript libraries: -->
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src='js/jquery-ui-1.8.20.custom.min.js' type="text/javascript"></script>
<script src='js/myjquery.js' type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/ui.dynatree.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.dynatree.js" type="text/javascript"></script>

</head>

<body>
    <div id="tree">
        <ul>
            <li>one</li>
            <li><a target="_blank" href="">Google</a>
            <li class="folder expnded">Examples
                <ul>
                    <li><a target="content" href="" id="s">one</a>
                    <li><a target="content" href="two.html">two</a>
                    <li class="folder">Folder one
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                        </ul>
                    <li><a target="content" href="three.html">three</a>
                    <li><a target="content" href="four.html">four</a>
                    <li class="folder">Folder two
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                        </ul>
                    <li class="folder">Folder three
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                            <li class="folder">Inner Folder
                                <ul>
                                    <li><a target="content" href="one.html">one</a>
                                    <li><a target="content" href="two.html">two</a>
                                </ul>
                        </ul>
                </ul>
        </ul>
    </div>

    <div id="display">
    <a href="" id="s">one</a>
    </div>

</body>
</html>

The picture I posted is the output of above HTML code.

In myjquery.js file I have code (old) like this

$(function() {
        // --- Initialize sample trees
        $("#tree").dynatree({
            autoFocus : true,
            //          persist: true,
            minExpandLevel : 2,
            onFocus : function(node) {
                // Auto-activate focused node after 1 second
                if (node.data.href) {
                    node.scheduleAction("activate", 1000);
                }
            },
            onBlur : function(node) {
                node.scheduleAction("cancel");
            },
            onActivate : function(node) {
                if (node.data.href) {
                    window.open(node.data.href, node.data.target);
                }
            }
        });
    });

Update 2:

solution for my problem

In myjquery.js file, the following new code works for me. You can compare it with old code above.

$(function() {
    // --- Initialize sample trees
    $("#tree").dynatree({
        autoFocus : true,
         persist: true,
        minExpandLevel : 1,
        onFocus : function(node) {
            // Auto-activate focused node after 1 second
            if (node.data.href) {
                node.scheduleAction("activate", 1000);
            }
        },
        onBlur : function(node) {
            node.scheduleAction("cancel");
        },
        onActivate : function(node) {
            if (node.data.href) {
                window.open(node.data.href, node.data.target);
            }
        },
        onClick : function(node) {
            $.ajax({
                type : "GET",
                url : "Display",
                data : {
                    id : node.data.title
                },
                success : function(data) {
                    $("#display").html(data);
                }
            });
        }
    });
});
Was it helpful?

Solution 

$('a', '#tree li').on('click', function(e) {
  e.preventDefault();    // this line is for prevent page reload
  alert($(this).text());
});

DEMO

Read more about .text() and jQuery selectors

According to edit

You can try like below:

$('span[class^=dynatree-exp-c] a').on('click', function(e) {
    e.preventDefault();
    alert( $(this).text() );
});

Each leaf node of dynatree is span that has class like dynatree-exp-c, dynatree-exp-c1 etc, so I use [class^=dynatree-exp-c] to select that span whose class start with dynatree-exp-c.

OTHER TIPS

$('a').click(function(){
    alert($(this).text());
    return false;
});

Use this script.

jQuery('a').click(function(){
   var x = jQuery(this).text();
    alert(x);
});​

Here is Demo

$('a').click(function(e){
    alert( $(this).text() );
    e.preventDefault();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top