使用jquery将选定的第n个孩子包装在div中答案

【问题标题】：wrapping selected nth childs in divs using jquery使用jquery将选定的第n个孩子包装在div中
【发布时间】：2017-06-01 18:36:36
【问题描述】：

我正在尝试选择 div 并使用第 n 个子项将它们包装在引导列中。

我有：

<div class="owl-news">
    <div class="item news-v2">
    <div class="item news-v2">
    <div class="item news-v2">
    <div class="item news-v2">
    <div class="item news-v2">
    <div class="item news-v2">
    <div class="item news-v2">
    <div class="item news-v2">
</div>

目前我已经尝试过（因为 div 有“news-v2”类）：

var divs = $(".owl-news > .news-v2");
for (var i = 0; i < divs.length; i+=3) {
    divs.slice(i, i+3).wrapAll("<div class='col-md-2'></div>");
}

给出以下输出：

 <div class="owl-news">
    <div class="col-md-2">
        <div class="item news-v2">
        <div class="item news-v2">
        <div class="item news-v2">
    </div>
    <div class="col-md-2">
        <div class="item news-v2">
        <div class="item news-v2">
        <div class="item news-v2">
    </div>
    <div class="col-md-2">
        <div class="item news-v2">
        <div class="item news-v2">
    </div>
    </div>

但这只是在 col-md-2 中包装每 3 个 div，我需要专门选择第一个 div、下一个 2、下一个 2 和最后一个 3。要生成我想要的：

<div class="owl-news">
        <div class="col-md-4">
        <div class="item news-v2"></div>
    </div>
    <div class="col-md-3">
        <div class="item news-v2"></div>
        <div class="item news-v2"></div>
    </div>
    <div class="col-md-3">
        <div class="item news-v2"></div>
        <div class="item news-v2"></div>
    </div>
    <div class="col-md-2">
        <div class="item news-v2"></div>
        <div class="item news-v2"></div>
        <div class="item news-v2"></div>
    </div>
    </div>

【问题讨论】：

如果你不懒惰最好。而不是显示<div 4> 等，而是实际显示它们的样子。并写出你最终的 html 结果。
我认为编号有助于理解我想要什么，但公平地说，我已经更新了这个问题。
那么I want 是最终结果吗？ which gives the following output 是您当前的代码输出吗？起始代码是什么样的？一般来说，我认为最好按此顺序描述您的问题。 What I started with -> what I did (and the output) -> what I want.
@A.Lau 谢谢你的建议，我已经相应地更新了问题。希望这会有所帮助
啊，看起来好多了，现在你的问题会更吸引更多的观众

标签： javascript jquery html jquery-selectors

【解决方案1】：

不幸的是，由于您想要的格式并没有真正遵循任何模式，所以您可以随意选择。

在下面查看我的代码。

var divs = $(".owl-news > .news-v2");
let array = [
  { length: 1, num: 4 },
  { length: 2, num: 3 },
  { length: 2, num: 3 },
  { length: 3, num: 2 }  
];

let i = 0;


for (let item of array) {
  divs.slice(i, i+item.length).wrapAll(`<div class='col-md-${item.num}'></div>`);
  i += item.length;
}

console.log($(".owl-news").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-news">
    <div class="item news-v2"></div>
    <div class="item news-v2"></div>
    <div class="item news-v2"></div>
    <div class="item news-v2"></div>
    <div class="item news-v2"></div>
    <div class="item news-v2"></div>
    <div class="item news-v2"></div>
    <div class="item news-v2"></div>
</div>

您的代码不起作用的原因是因为您总是添加 3 divs.slice(i, i+3) 并且总是使用 using "md-2" .wrapAll("<div class='col-md-2'></div>");

【讨论】：