使用jQuery在元素后面包装文本

Question

是)我有的:

标签内的复选框.

<label for="foo">
  <input type="checkbox" id="foo" />bar
</label>

我需要的:

使用jQuery,我需要在span元素中包含复选框后面的文本(即"bar").

<label for="foo">
  <input type="checkbox" id="foo" /><span>bar</span>
</label>

我尝试过的:

$('label').wrapInner('<span></span>');

这不会根据需要排除复选框.

Answer 1

如果要包装文本节点,可以根据nodeType属性是否为3(这是文本节点的值)来过滤元素的内容,并包装返回的文本节点.

$('label').contents().filter(function () {
  return this.nodeType === 3;
}).wrap('<span></span>');

或者,如果您知道文本节点将始终是input元素的下一个兄弟节点,则可以使用该nextSibling属性选择下一个兄弟节点:

$('label input').each(function () {
  $(this.nextSibling).wrap('<span></span>');
});