JQuery - 如何在一些html中添加單個html標簽？

Question

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

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

所以，上面變成了

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

這是我的JQuery代碼：

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

當我在firebug中查看代碼之后，我看到<span></span> ，我如何獲得開始span標記而不是結束標記？

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

我遇到了一個問題，我正在使用第三方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，不用謝謝這么糟糕的第三方API（我的意思是真的很糟糕）。

SaltWater公司的開發人員給了我這個修復程序。

Answer 3

我不知道你為什么要它，但它可以這樣做，

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

Answer 4

當您使用prepend ，您不會向頁面添加標記文本，而是向頁面添加元素 。 元素沒有“開始”和“結束”標記，元素是元素。 如果你想在一個span包裝一堆元素（我猜這是你想要的，如果你想在一個地方插入它的開頭而在另一個地方插入它的結尾），你需要添加跨度到容器然后將元素移入其中。

例如，這會將所有鏈接移出元素foo並將它們移動到container內的span 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>"將導致整個span元素被添加到DOM。 或者，正如您在Firebug中看到的那樣， "<span></span>"首先插入到錨元素中。

我不明白你為什么要創建無效的HTML，但如果必須，你可以這樣做：

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

或者，正如Reigel建議的那樣，使用.html（）方法的匿名函數（我很快就寫了我的答案，很明顯，非常有意思）：

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

否則，您似乎想要在span中包裝anchor元素的內容。 在這種情況下，您應該使用其中一個jQuery 包裝 方法 ：

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

你不是要自己創建起始元素和結束元素（使用jQuery時）。