jQuery Prepend Open Tag附加結束標記

Question

首先，我很熟悉。 wrapAll() ，這不是我需要的。 我有一些標記，我無法更改，我需要在<li>包裝所有內容。

這是我想要做的：

 $('nav[role="breadcrumb"] ul a').wrap('<li></li>'); $('nav[role="breadcrumb"] ul li:last').after('<li>'); $('nav[role="breadcrumb"] ul').append('</li>'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav role="breadcrumb"> <ul class="clearfix"> <a href="http://eggaday.armystage.com/">Home</a> <a href="http://eggaday.armystage.com/health-care-professionals/">Health Care Professionals</a> Healthy Choices Cholesterol Kits </ul> </nav> 

問題是jQuery會關閉每個<li>標簽。 這是原始標記：

 <nav role="breadcrumb"> <ul class="clearfix"> <a href="http://eggaday.armystage.com/">Home</a> <a href="http://eggaday.armystage.com/health-care-professionals/">Health Care Professionals</a> Healthy Choices Cholesterol Kits </ul> </nav> 

正如您所看到的，我在<ul>的底部有一些松散的文本，我試圖將其包含在<li> 。

Answer 1

.contents()將獲取所有子節點，包括文本節點

$('nav[role="breadcrumb"] ul').contents().filter(function() {
   return $.trim($(this).text())!=="";
}).wrap('<li/>');

編輯：添加了過濾方法來擺脫空白文本節點

Answer 2

jQuery僅適用於完整元素，您不能只附加一個結束標記或開始標記。

如果ul沒有任何其他列表項，您可以簡單地使用wrapInner

$('nav[role="breadcrumb"] ul').wrapInner("<li />");

如果它確實包含LI，最簡單的方法是分離它們，包裹內部，然后附加它們。

var $lis = $('nav[role="breadcrumb"] ul > li').detach();
$('nav[role="breadcrumb"] ul').wrapInner("<li />").prepend($lis);

Answer 3

首先嘗試創建<li>，然后將選擇器附加到它：

var $li = $('<li>').append('nav[role="breadcrumb"] ul a');

然后使用$ li替換或追加您喜歡的任何地方。