如何制作新的Div内部列表项目

How to make new Div inside list items

本文关键字：内部 列表 项目 Div 何制作      更新时间：2023-09-26

我找到了相关的答案，但与这个问题不同
我的问题是如何使新的Div内列表项目只在.widget-content上，如下所示？

MainHTML：Fiddle

<div class="widget-content">
<ul>
<li>Test Content</li>
<li>Test Content</li>
<li>Test Content</li>
<li>Test Content</li>
<li>Test Content</li>
<li>Test Content</li>
</ul>
</div>

我想：

 <div class="widget-content">
 <ul>
 <div class='new1'> <!--Want to Add New dive class 1-->
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
    </div>
 <div class='new2'> <!--Add New dive class 2-->
 <ul>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
 </div>    
</ul>
</div>

意味着添加2个Div，<div class='new1'>具有前3个子项，<div class='new2'>具有后3个子项/列表项。如何通过Jquery/JS简单地做到这一点
提前谢谢。

你可以像这样做

var selectedIndex = 3;
$(".widget-content li").each(function (index) {
    if (index == selectedIndex) {
        $(this).prevAll().wrapAll("<div class='new1' />");
        $(this).nextAll().andSelf().wrapAll("<div class='new2' />");
    }
});

<div class="widget-content">
        <ul id="ul1"></ul>
</div>

js：我假设这里的计数是3

window.onload = function () {
    for (var i = 0; i < 3; i++) {
        var div = document.createElement('div');
        div.className = 'row' + i;
        div.innerHTML = '<li>Test Content</li>'
    <li>Test Content</li>'
    <li>Test Content</li>';
        document.getElementById('ul1').appendChild(div);
    }
};

jsfiddle

相关文章：