如何在列表项中创建新的Div [英] How to make new Div inside list items

问题描述

我找到了相关的答案，但与这个问题不一样.
我的问题是如何像下面给出的那样仅在.widget-content上创建新的Div列表项?

I have find related answers, but not same like this question.
My question is how to make new Div inside list items only on .widget-content like given below?

主要 HTML :小提琴

<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做到这一点?
预先感谢.

Means add 2 Div, <div class='new1'> have first 3 child and <div class='new2'> have last 3 child/List items. How to do this simply by Jquery/JS ?
Thanks in advance.

推荐答案

您可以这样做

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！