Question

this SHOULD be simple, but I have been through the Jquery Selector help for about an hour now and nothing seems to be working. Help!

I am basically trying to pull the text (an address) of a SPAN after a user clicks on the link next to it. Please note though, I will have about 10 on a page, so I cannot set a static address. It must be pulled when the user clicks.

The html code:

<a href="3" class="clicky">Click to Show Map</a> 
<span style="display: none" class="theaddy">123 Fake Street, Somewhere Else, 12341</span>

So really, my question is, how do I grab the text from .theaddy when a user clicks on .clicky?

As I said, I cannot use

 var propertyaddy = $(.theaddy).text(); 

because there are 10 of these addy’s on the same page. I need some sort of “THIS” > Next To kinda thing.

I also tossed around the idea of placing the SPAN inside the A, but my efforts on that weren’t working either.

Thank you in advance for any help!

Answer 1

You can use .next() to find the next sibling of any element.

$('.clicky').on('click', function() {
    var text = $(this).next().text();
    ...
});

So long as your required .theaddy element is always the “next” element there’s no need to give a specific class selector inside the .next() call.

If there might be other elements in between, you can use .nextAll('.theaddy').first(). This generates a list of all following .theAddy elements, and then takes the first such element.