Question

For starters, this is my jsfiddle: http://jsfiddle.net/gab2G/2/

<div id="div">Click</div>
<a href="#">Blabla</a>
<a href="#">Blabla</a>
<a href="#">Blabla</a>
<a href="#">Blabla</a>
<p class="selected">goal</p>

Using jQuery I want to extract the text from the paragraph at the end. I know I could simply use

$('div').click(function() {
var str = $('p').text();
});

but what I’m trying to achieve is related to another problem of mine (which was then simply solved using next().next() to reach the target and hide it) but I’m making a mobile version of the page now using jQuery mobile and although the elements are positioned exactly the same, next().next() doesn’t seem to work anymore. I thought I should start with finding a more efficient way of selecting my target div than a double next(). Any thoughts?

Thanks.

Answer 1

You want to use siblings – next only matches the immediately following sibling. From your fiddle:

$('div').click(function() {
  var str = $(this).siblings('p').text();
  alert(str);

  var str2 = $(this).siblings('.selected').text();
  alert(str2);
});

​
It would probably be more performant if you had better scoping in your markup though, such as having the p inside the div you’re clicking on.