Select inner text with jQuery

问题:

<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 > * doesn't work. Neither does this:children.

回答1:

Because of the slightly confusing title, some people (like me) may be coming to this question looking for how to get the textual content of a DOM element. You can accomplish this by:

$("#myselector").text() // returns the content of the element as plain text

回答2:

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

回答3:

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();

回答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.