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>

如果给出了类似这样的内容，如果点击了41（类$(this)），如何为文字boxen添加动画效果？

this > *不起作用。 this:children也没有。

Answer 1

由于标题略显混乱，有些人（像我一样）可能会来这个问题，寻找如何获取DOM元素的文本内容。您可以通过以下方式完成此任务：

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

Answer 2

$（“＃divID”）。html（）会得到里面的文字。

Answer 3

要选择div，您可以使用以下内容：

$('#box41_0_1')

为了给整个盒子制作动画，你可以做到

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

或其他animation effect。

编辑：如果您只想选择内部文字，可以使用div尝试wrapping内部文字，但使用您提供的代码，也可以选中复选框我相信。代码示例：

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

Answer 4

您可以在一个范围中包装div的内容，然后将输入移动到该范围之外。然后你可以设置跨度的动画。像这样：

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

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

您也可以将直接DOM脚本与jQuery混合搭配，如下所示：

$('.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);

无论哪种方式都应该有效。

使用jQuery选择内部文本

4 个答案: