Question

How can i get the text from a span that precedes an text input and when that input gains focus get the span of the focused input? lets say that the inputs are like this:

<div>
<label for="id">...</label>
<input type="text" id="id" value="" />
<span class="span">span</span>
</div>

is there a way to get the value maybe something like this:

$('#id').live('focus', function(){
var text = $(this, '.span').text();
});

I do a live binding because the inputs are dynamically created
i’ve also tried something like this but does not seem to work:

var text = $(this).find('.span').text();

thank you in advance!

Answer 1

You mean a span that succeeds your input? That’s how your html is structured.

I think this is what you’re looking for

$('#id').live('focus', function(){
   var text = $(this).siblings("span:first").text();
});

Or if you’re 100% certain that the span will always be right next to the input, you could do

$('#id').live('focus', function(){
   var text = $(this).next().text();
});

But if you really do want the span that comes immediately before your input, you could use the prev function:

$('#id').live('focus', function(){
   var text = $(this).prev("span").text();
});

---

Finally, note that live is deprecated. Normally I’d recommend switching to on, but since you’re just selecting a single element by id, why not simply do:

$('#id').focus(function() {
   var text = $(this).prev("span").text();
});

Or to make this more general, and able to work with any input

$(document).on("focus", "input[type='text']", function() {
   var text = $(this).prev("span").text();
});