Question

嗨，我为我构建的网格提供了第n个子选择器的模式。为了获得更多控制，我希望将其中一些包装到div中。

我试图用jquery wrapAll实现这一点。但这会破坏网格的样式。

所以我的问题是我写错了什么或者是否有另一种方法来实现这一目标

这就是我所拥有的：

$(".item:nth-child(6n+1), .item:nth-child(6n+2), .item:nth-child(6n+3)")
.wrapAll( "<div class='row'></div>");
$(".item:nth-child(6n+4), .item:nth-child(6n+5)")
.wrapAll( "<div class='row'></div>");

body {
  position: relative;
  margin: 0 auto 0 auto;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
}

.item {
  margin: 50px 20px;
  text-align: center;
  position: relative;
}

.item img {
  width: 100%;
}

.projectTitle {
  position: absolute;
  width: 95%;
  top: 100%;
}

/* ROW */
.item:nth-child(6n+1) { width: 25%; }
.item:nth-child(6n+2) { width: 25%; }
.item:nth-child(6n+3) { width: 25%; }

/* ROW */
.item:nth-child(6n+4) { width: 80%; }
.item:nth-child(6n+5) { width: 40%; }
.item:nth-child(6n)   { width: 40%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="item">
    <img src="http://via.placeholder.com/875x1200">
    <div class="projectTitle">
      Hello<br><span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/480x655">
    <div class="projectTitle">
      Hello<br><span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/475x650">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/800x450">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/875x625">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/655x480">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/475x650">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/800x450">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/520x250">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/475x625">
    <div class="projectTitle">
      Hello<span>Title</span>
    </div>
  </div>

Answer 1

根据您的更新评论，您似乎希望每组3个项目都放在自己的行中。

可以使用以3和slice()递增的循环来获取每个项目组并在每次迭代后添加新行

var $cont = $('.row').parent(),
  $items = $('.item:gt(2)');

for (var i = 0; i < $items.length; i = i + 3) {
  $('<div class="row">').append($items.slice(i, i + 3)).appendTo($cont);
}

.row {
  border: 2px solid #ccc;
  padding: 10px;
  margin-top: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
</div>

用jQuery包装第n个孩子

1 个答案: