javascript - Returning an element and filtering inner elements to get their contents

Question

This is the selector I am trying to use in order to return the data below it.

$('.groupPopper').click(function(event){
    var name = $(this).index(".name").contents();
    alert(name);
});

<a class="groupPopper">
   [text class="name">Name here</a>
</a>

How do I return the text element by it's class, by clicking element 'a' in jquery? My example won't work..

Answer 1

Assuming what you've posted under your jQuery is supposed to be HTML, this should work:

$('.groupPopper').click(function(event){
    var name = $(".name", this).text();
    alert(name);
});

Answer 2

Try this. jsfiddle

$('.groupPopper').click(function(event){
    var name = $(".name", this).text();
    alert(name);
});

Answer 3

try using `.text()`

$('.groupPopper').click(function(event){
    var name = $(this).find('.name').text();
    alert(name);
});

Answer 4

To return a child by its class name, you can use .find in jQuery:

$('.groupPopper').click(function(event){
    var name = $(this).find(".name").text();
    alert(name);
});

Or if you have more than one child with this class, you can iterate them with .each:

$('.groupPopper').click(function(event){
    $(this).find(".name").each(function() {;
        var name = $(this).text();
        alert(name);
    });
});