我有一個固定的 wp 子選單串列，看起來像這樣：
<ul class="sub-menu" style="display:flex">
<li class="open1col"><a>Treatment Trials</a></li>
<li class=""><a>Alzheimer’s</a></li>
<li class="close1col open2col"><a href="">Asthma</a></li>
<li class=""><a>COVID-19 Treatment</a></li>
<li class="close2col"><a>COPD</a></li>
</ul>
我想將前 3 個和最后 2 個元素包裝成 2 個<div >元素，以便它們并排制作兩個不同的列。
順便說一下，此內容不可編輯，我只能將類添加到 li 標簽。
我試過這樣的jQuery：
var open1col='<div >';
var close1col='</div><div >';
var close2col='</div>';
$( ".sub-menu li:first-child" ).before(open1col);
$( ".sub-menu li:nth-child(3)" ).before(close1col);
$( "sub-menu li:last-child" ).after(close2col);
});
但它在打開后立即關閉了 div，3 個<li>專案掉到了外面。
如何僅將開始和結束標記添加為 html 字串？
uj5u.com熱心網友回復：
雖然 jQuery 將字串作為輸入，但它在 DOM 上運行。
沒有開始標簽或結束標簽，只有元素、文本節點和其他節點。
所以，你不能那樣做。
與 DOM 一起作業，而不是試圖對抗它。
如果您想創建一個 div 然后在其中移動一些元素，請執行此操作。
const col = jQuery('<div />');
col.append($( ".sub-menu li:first-child"));
等等
uj5u.com熱心網友回復：
這不是 DOM 的作業方式。您不能單獨插入開始和結束標簽。
對于包裝元素，您可以使用 jQuery.wrapAll方法，該方法使用包裝器元素包裝所有選定的元素。
let wrapper = '<div ></div>'
$('.sub-menu li').slice(0, 3).wrapAll(wrapper).end().slice(3).wrapAll(wrapper);
請注意，您要查找的結果會產生無效的 HTML。ul元素應該只有li,script或template孩子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/494619.html
標籤：javascript html jQuery