使用 jQuery 在元素之后和之前添加标签答案

【问题标题】：Add Tag After and Before elements with jQuery使用 jQuery 在元素之后和之前添加标签
【发布时间】：2012-08-26 17:57:20
【问题描述】：

假设我有这个标记：

<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。有人知道怎么做吗？

【问题讨论】：

标签： jquery tags html

【解决方案1】：

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

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

见jQuery - after()

【讨论】：

【解决方案2】：

试试

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

这个wraps是<span>中<a>之后的文本节点（即它的nextSibling）

DEMO

【讨论】：