Select inner text (jQuery)

Question

<div class="boxen checkedzahlen" id="box41_0_1">
 41
 <input type="checkbox" value="1" name="cb41_0_1" id="cb41_0_1" checked="checked"/>
</div>

Something like this is given, how can i animate the text ("41"), if $(this) <- the class:boxen, is clicked?

this > * does not work, this:children also not...

Answer 1

In order to select the div, you would use the following:

$('#box41_0_1')

In order to animate the whole box, you could do

$('#box41_0_1').fadeOut().fadeIn();

or some other animation effect.

Edit: If you want to select only the inner text, you could try wrapping the inner text with a div, but with the code you provided, that would also select the checkbox I believe. Code example:

$('#box41_0_1').wrapInner("<span id='span41_0_1'></span>");
$('#span41_0_1').fadeOut().fadeIn();

Answer 2

try to brake it down. how to select text inside a div, which is not inside a span or div...

Answer 3

$("#divID").html() would get the text inside.

Answer 4

You could wrap the contents of the div in a span and then move the input outside of that span. Then you can animate the span. Something like this:

$('.boxen').each(function() {
  var $thisBox = $(this);
  $thisBox.wrapInner('<span></span>');
  $thisBox.find('input').appendTo($thisBox);
});

$('.boxen span').animate({fontSize: '28px'}, 400);

You could also mix and match straight DOM scripting with jQuery, like so:

$('.boxen').each(function() {
  var newSpan = document.createElement('span');
  newSpan.innerHTML = this.firstChild.nodeValue;
  this.firstChild.nodeValue = '';
  $(this).prepend(newSpan);
});

$('.boxen span').animate({fontSize: '28px'}, 400);

Either way should work.