0

我正在摧毁自己以找到一个在 JQuery 中工作的解决方案，以解决以下问题：在一个容器内，我有一堆项目和模式。

根据屏幕解决方案，我想将模式包装在一行内，并将该行放在最后一个相关项目之后。

这是起始列表的样子：

<div class="overview">
    <div class="item n0">Item</div>
    <div class="item n1">Item</div>
    <div class="item n2">Item</div>
    <div class="item n3">Item</div>
    <div class="item n4">Item</div>
    <div class="item n5">Item</div>
    <div class="item n6">Item</div>
    <div class="item n7">Item</div>
    <div class="item n8">Item</div>
    <div class="item n9">Item</div>
    <div class="modal n0">Modal</div>
    <div class="modal n1">Modal</div>
    <div class="modal n2">Modal</div>
    <div class="modal n3">Modal</div>
    <div class="modal n4">Modal</div>
    <div class="modal n5">Modal</div>
    <div class="modal n6">Modal</div>
    <div class="modal n7">Modal</div>
    <div class="modal n8">Modal</div>
    <div class="modal n9">Modal</div>
</div>

要在 3 个项目之后显示包含 3 个连接模式的行，结果应如下所示：

<div class="overview">
    <div class="item n0">Item</div>
    <div class="item n1">Item</div>
    <div class="item n2">Item</div>
        <div class="row">
            <div class="modal n0">Modal</div>
            <div class="modal n1">Modal</div>
            <div class="modal n2">Modal</div>
        </div>
    <div class="item n3">Item</div>
    <div class="item n4">Item</div>
    <div class="item n5">Item</div>
        <div class="row">
            <div class="modal n3">Modal</div>
            <div class="modal n4">Modal</div>
            <div class="modal n5">Modal</div>
        </div>
    <div class="item n6">Item</div>
    <div class="item n7">Item</div>
    <div class="item n8">Item</div>
        <div class="row">
            <div class="modal n6">Modal</div>
            <div class="modal n7">Modal</div>
            <div class="modal n8">Modal</div>
        </div>
    <div class="item n9">Item</div>
    <div class="row">
        <div class="modal n9">Modal</div>
    </div>
</div>

我还尝试在这里设置一个小提琴：fiddle，但我根本无法让它工作。你们中的任何人都可以提供帮助吗？

非常感谢，汤姆

4

1 回答 1

0

在这里，您可以使用解决方案https://jsfiddle.net/3p3415qo/29/

var modals = $('.overview > .modal');

for(var i = 0; i < modals.length; i+=3) {
  $('.overview > div[class="item n' + (i+2) + '"]').after("<div class='row row" + i + "'></div>")
  $('.row' + i).html($('div[class="modal n' + i +'"], div[class="modal n' + (i+1) +'"], div[class="modal n' + (i+2) +'"]').clone());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overview">
  <div class="item n0">Item</div>
  <div class="item n1">Item</div>
  <div class="item n2">Item</div>
  <div class="item n3">Item</div>
  <div class="item n4">Item</div>
  <div class="item n5">Item</div>
  <div class="item n6">Item</div>
  <div class="item n7">Item</div>
  <div class="item n8">Item</div>
  <div class="item n9">Item</div>
  <div class="modal n0">Modal</div>
  <div class="modal n1">Modal</div>
  <div class="modal n2">Modal</div>
  <div class="modal n3">Modal</div>
  <div class="modal n4">Modal</div>
  <div class="modal n5">Modal</div>
  <div class="modal n6">Modal</div>
  <div class="modal n7">Modal</div>
  <div class="modal n8">Modal</div>
  <div class="modal n9">Modal</div>
</div>

希望这会帮助你。

于 2017-08-11T05:48:26.457 回答