[英]Convert LI elements to DIV
我在嵌套div中有一個項目列表,其中有parent,grandparent和great grandparent div
s。 html代碼如下所示:
<div class="marketing">
<div class="module-surround">
<div class="module-content">
<div class="k2ItemsBlock">
<ul>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
</ul>
</div>
</div>
</div>
</div>
我想將所有列出的項目轉換為父div,並使用所有列出的項目替換偉大的盛大父div,以便整體代碼如下所示:
<div><div>4</div></div>
<div><div>5</div></div>
<div><div>6</div></div>
<div><div>7</div></div>
按照我的邏輯,我想使用jQuery來實現這一點,到目前為止,我已經能夠將所有元素放入.K2ItemsBloc ul中的列表項中,並放入變量中,並將div.marketing替換為列表,我的jQuery代碼看起來像這樣嗎
//1. Get all content in K2ItemsBlock ul into a variable called mlist
var mlist = $(".k2ItemsBlock ul").contents()
//2. Change all li HTML elements inside the variable mlist to div
//3. Replace div.marketing with the variable mlist
$(".marketing").replaceWith(mlist);
上面沒有任務#2的jQuery代碼行將我的原始代碼轉換為
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
我現在能弄清楚的是在用div.marketing替換變量mlist之前轉換所有li元素的語法。
有什么建議或想法嗎?
不知道div是否是ul
元素的有效子元素。.但是您可以這樣做
$('.k2ItemsBlock li>div').unwrap() // <--- removes the li
.wrap('<div/>'); // <-- adds the div
編輯:我編輯添加li>div
只是為了使其更具體
如果只希望影響頂層li / div,則將選擇器更改為此
$('.k2ItemsBlock > ul > li > div') // <-- ">" is direct child selector
完整的解決方案是:
var marketing = $(".marketing");
var content = marketing.children().remove();
content.find(".k2ItemsBlock li>div").unwrap().wrap("<div>");
marketing.replaceWith(content.find(".k2ItemsBlock li>div");
除頂級div外,這應會抓住所有其他內容。 從dom中刪除它,在Javascript中執行操作以提高效率。 然后用生成的html替換頂級div。
mlist = mlist.replace('/li/g','div');
應該這樣做。 最好替換<li>
和</li>
這樣就不會意外替換實際的字母li(如果有的話)。
mlist = mlist.replace('/<li>/g','<div>').replace('/<\/li>/g','</div>');
你明白了。
// Get an array of li elements
var mlist = $(".k2ItemsBlock ul li");
// new array of div's containing the content of li elements
var dlist = mlist.map(function(i, val){return "<div>" + $(val).html() + "</div>";});
// join div array into a single string
var result = dlist.toArray().join('');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.