Question

我找到了相关的答案，但不像这个问题一样。
我的问题是如何仅在.widget-content上创建新的Div内部列表项，如下所示？

主要 HTML ：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简单地完成这项工作？
提前致谢。

Answer 1

<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

Answer 2

你可以这样做

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

2 个答案: