Jquery variable problem

Question

The HTML:

<div class="first" id="first_id">
<div class="second">text sample</div>
<div class="third"><button type="submit" class="some_class" id="some_id">send</button></div>
</div>

Jquery:

$("#some_id").click(function() {
var test = $(this).closest('.first').attr('id');
..
return false;
});

I want to replace content of the "first" div using var "test" in jquery code above. Something like:

$("."+test).html('<img src="img/spin.gif">');

But when I put this part of the code in function above it does not work. What I did wrong?

Nick Craver · Accepted Answer · 2010-07-25 10:36:41Z

You're getting the ID but selecting it as a .class selector (so it should be $("#"+test)), but it can be easier, like this:

$("#some_id").click(function() {
  $(this).closest('.first').html('<img src="img/spin.gif">');
  return false;
});

There's no need to go selecting the element again, you already have it, so just calling .html() on the element you found with .closest() works, simpler and faster :)

For completeness sake though, what you should do is this:

$("#some_id").click(function() {
  $(this).closest('.first').empty().append('<img src="img/spin.gif">');
  return false;
});

Using a .empty() call will cleanup the click handler we're in, otherwise it'l be left around in $.cache...this isn't a big issue, but if you have lots of elements it adds up, it's best to always cleanup if possible.

gruszczy · Accepted Answer · 2010-07-25 10:36:43Z

1

You put id value into the test, but then you use '.' in selector. Instead you should use '#'.

answered Jul 25, 2010 at 10:36

gruszczy

42.4k31 gold badges137 silver badges186 bronze badges

Collectives™ on Stack Overflow

Jquery variable problem

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related