2

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

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

所以，上面变成了

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

这是我的 jQuery 代码： 

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

当我之后在 firebug 中查看代码时，我看到<span></span>，我如何只获取开始跨度标记而不是结束标记？

4

5 回答 5

6

首先，您想要的是格式错误的 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>
于 2010-05-11T09:59:58.657 回答
4

我遇到了一个问题，我使用的是使用 php curl 将平面 HTML 放入我的网页的 3rd 方 API。在返回的 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，不，谢谢这么糟糕的 3rd 方 API（我的意思是真的很糟糕）。

这个修复是由SaltWater Co.的开发人员提供给我的。

于 2012-10-01T14:59:36.987 回答
2

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

$('#mainnav li a').html(function(i,v){
   return '<span>' + v;
})
于 2010-05-11T10:03:57.613 回答
1

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

例如，这会将所有链接移出元素foo并将它们移入 span inside container：

var stuff;
var container;

stuff = $('#foo a');
span = $("<span style='background-color: yellow'>");
span.append(stuff);
$('#container').append(span);
于 2010-05-11T09:59:08.030 回答
0

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

我不明白你为什么要创建无效的 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 时）。

于 2010-05-11T10:11:47.483 回答