Question

考虑类似这样的事情

<div class="wrapper">
  <div class="items">Item 1</div>
  <div class="items">Item 2</div>
  <div class="items">Item 3</div>
  <div class="items">Item 4</div>
  <div class="items">Item 5</div>
  <div class="items">Item 6</div>
</div>

如果包装器是＆gt;我正试图放一个DIV。 3和其他如果包装是> 5

  <div class="d1">ADS</div>
  <div class="d2">ADS</div>

我的代码应如下所示：

<div class="wrapper">
  <div class="items">Item 1</div>
  <div class="items">Item 2</div>
  <div class="items">Item 3</div>
  <div class="d1">ADS</div>
  <div class="items">Item 4</div>
  <div class="items">Item 5</div>
  <div class="d2">ADS</div>
  <div class="items">Item 6</div>
</div>

我正在使用jQuery的appendTo（）方法，但认为我无法达到我想要的解决方案。

$(function() {
  var numItems = $('.wrapper').length;
  if(numItems > 3) {
      $(".d1").appendTo(".wrapper .items");
  }
});

Answer 1

使用nth-child选择器和insertAfter功能

＆＃13;

$(".d1").insertAfter('.items:nth-child(3)');
$(".d2").insertAfter('.items:nth-child(6)');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="items">Item 1</div>
  <div class="items">Item 2</div>
  <div class="items">Item 3</div>
  <div class="items">Item 4</div>
  <div class="items">Item 5</div>
  <div class="items">Item 6</div>
</div>
 <div class="d1">ADS</div>
  <div class="d2">ADS</div>

＆＃13;

Answer 2

您可以使用

    $('.d1').insertAfter('.items:nth-child(2n+1)');

如果要在每个奇数项之后插入div。您可以将n硬编码为您的任何整数。喜欢在第三个元素之后插入，将n替换为1，即2 * 1 + 1 = 3等于

 $('.d1').insertAfter('.items:nth-child(3)');

同样，对于第5个元素，n = 2。对于第7个元素，n = 3，依此类推......

在元素内移动DIV

2 个答案: