Jquery next selector next() question

Question

+----------------------------------------------------------------------+
| this is div .content                                                 |
|                                                                      |
|              +----------------+                                      |
|              | .left_content  |                                      | 
|              | input inside   |                                      |             
|              +----------------+                                      |
|                                                                      |
|                                                                      |
|                                                      +------------+  |
|                                                      |     span   |  |
|                                                      +------------+  |
|                                                                      |
+----------------------------------------------------------------------+

Hello all, I'm trying to access the span element with jquery but I have some kind of error, here is the deal .content is main div , .left_content div is inside it and span is inside .content but outside .left_content.

Now I can easily access span by using .content span, but since .content, .left_content and span are repeating throughout the website I want to access these elements by clicking on the input inside .left_content div.

So finally I come to my question (from input inside .left_content perspective), how to get div .content , .left_content and span selected?

So far what I've only managed to do is to get .left_content selector by using $(this)parent('div:first')

Answer 1

Not sure what you mean, but:

$('input').click(function() {
    var left_content = $(this).parent();
    var content = left_content.parent();
    var span = content.find('span');
});

Answer 2

This will do the trick:

$(this).closest("div.content").find("span")