使用jQuery在元素前后添加标签

Question

假设我有以下标记:

<li class="cat-item"><a href="#">Item 1</a> 5 </li>
<li class="cat-item"><a href="#">Item 2</a> 9 </li>
<li class="cat-item"><a href="#">Item 3</a> 4 </li>
<li class="cat-item"><a href="#">Item 4</a> 3 </li>
<li class="cat-item"><a href="#">Item 5</a> 7 </li>

我希望在<li><a>item</a>后面、</li>前面插入一个标签，即如下所示。

<li class="cat-item"><a href="#">Item 1</a><span> 5 </span></li>
<li class="cat-item"><a href="#">Item 2</a><span> 9 </span></li>
<li class="cat-item"><a href="#">Item 3</a><span> 4 </span></li>
<li class="cat-item"><a href="#">Item 4</a><span> 3 </span></li>
<li class="cat-item"><a href="#">Item 5</a><span> 7 </span></li>

我想要用jQuery完成，有人知道怎么做吗？

- Anthuan Vásquez

Answer 1

尝试

$('li.cat-item a').each(function(){
    $(this.nextSibling).wrap('<span>');
});

这个包裹了<a>后面的文本节点（即它的nextSibling）在一个<span>中。

演示

- Musa

Answer 2

这将在每个 li.cat-item 中的 a 标签后插入一个空的 span 标签：

$('li.cat-item a').after('<span />');

请参见jQuery - after()

- TheHe