JQuery - 如何向某些 html 添加单个 html 标签？

Question

我想在下面的文本之前（就在 LINK 之前）插入一个 ：

<li><a href="">LINK</a></li>

因此，上面的内容变成

<li><a href=""><span>LINK</a></li>

这是我的 JQuery 代码：

$('#mainnav li a').prepend('<span>');

当我查看在 firebug 中编写代码后，我看到 ，如何获取开始跨度标签而不是结束标签？

Answer 1

首先，您想要的是格式错误的 HTML。 jQuery 将使创建它变得困难甚至不可能。我建议一步完成，而不是多个步骤。尝试：

$("li > a").each(function() {
  $(this).contents().wrapAll("<span>");
});

输入：

<ul>
  <li><a href="...">testing</a></li>
  <li><a href="...">rich <b>content</b> with <i>inner tags</i></a></li>
</ul>

输出：

<ul>
  <li><a href="..."><span>testing</span></a></li>
  <li><a href="..."><span>rich <b>content</b> with <i>inner tags</i></span></a></li> 
</ul>

Answer 2

我遇到了一个问题，我正在使用第 3 方 API，该 API 使用 php curl 将平面 HTML 放入我的网页中。在返回的 api HTML 中，有一些格式错误的 span 标签，这些标签导致我在 IE 中的渲染失效。我使用Jquery 的replaceWith() 函数来解决这个问题。下面是一个例子：

格式错误的 HTML：（注意未打开的 span 标签）

<a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span> 

我的解决方案：

$('.aa_navlink').replaceWith('<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a>');

结果 HTML：

<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span>

BOOM 我们现在已经有了格式良好的 HTML，不，谢谢，这么蹩脚的第 3 方 API（我的意思是真的很蹩脚）。

此修复是 SaltWater Co. 的开发人员提供给我的

Answer 3

我不知道你为什么想要它，但可以这样做，

$('#mainnav li a').html(function(i,v){
   return '<span>' + v;
})

Answer 4

当您使用prepend时，您并不是向页面添加标记文本，而是向页面添加元素。元素没有“开始”和“结束”标签，元素就是元素。如果你想将一堆元素包装在一个 span 中（我猜这就是你想要的，如果你想将它的开头插入一个地方，将它的结尾插入另一个地方），您需要将跨度添加到容器中，然后将元素移入其中。

例如，这会将所有链接移出元素 foo 并将它们移动到 container 内的跨度中：

var stuff;
var container;

stuff = $('#foo a');
span = $("<span style='background-color: yellow'>");
span.append(stuff);
$('#container').append(span);

Answer 5

许多 jQuery 方法被设计为仅从半写标签自动创建元素，例如 .prepend() 的 "" 将导致将整个 span 元素添加到 DOM。或者，正如您在 Firebug 中看到的那样，"" 首先插入到锚元素中。

我不明白为什么你想要创建无效的 HTML，但如果你必须，你可以这样做：

$("li > a").html("<span>"+$("li > a").html());

或者，正如 Reigel 建议的那样，使用 .html() 方法的匿名函数（我写了我的答案而不是快速且明显地不假思索）：

$("li > a").html(function (idx, html) {
    return "<span>" + html;
});

否则，您可能会想将锚元素的内容包装在一个跨度中。在这种情况下，您应该使用 jQuery 包装 方法 >：

$("li > a").wrap("<span>");

您不应该自己创建起始元素和结束元素（使用 jQuery 时）。