使用jQuery在元素后面换行文本

Question

我的内容：

标签内的复选框。

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

我需要的是：

使用jQuery，我需要将复选框后面的文本（即“bar”）用span元素包裹起来。

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

我尝试过的方法：

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

这并不意味着复选框不是必需的。

- Clarus Dignus

Answer 1

如果您想要包装文本节点，可以根据元素内容来过滤nodeType属性是否为3（即文本节点的值），然后包装返回的文本节点。

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

或者，如果您知道文本节点将始终是input元素的下一个同级节点，则可以使用nextSibling属性选择下一个同级节点：

Alternatively, if you know the text node will always be the next sibling of the input element, you could select the next sibling node using the nextSibling property:

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

- Josh Crozier

---

太棒了...我认为可以不使用nodeType来实现。看看我的答案。 - Praveen Kumar Purushothaman

后一种方法确实适用于我的特定情况。 - Clarus Dignus