Question

我有一个包含物品的清单，我想添加两个不同的CTA栏，这是另一个容器（无法更改标记）。我想将cta栏添加为每第6个项目，但第一个cta栏应从第4个开始（在第3个之后）。

我已经尝试过“ .listing__item：nth-child（6n-3）”，如果我仅使用此cta条，但当我有另一个cta条时，计算将无法正常工作。< / p>

(function($) {
    $('.cta__price').detach().insertAfter(
		$('.listing.example').find('.listing__item:nth-child(6n - 3)')
	);
	$('.cta__contact').detach().insertAfter(
		$('.listing.example').find('.listing__item:nth-child(6n)')
	);
})(jQuery);

.container {
  padding: 20px;
}
.container.example {
  display: flex;
  flex-flow: row wrap;
  margin: -20px 0 0 -20px;
}
.container.example .listing__item {
  background-color: pink;
  margin: 20px 0 0 20px;
  width: calc(100% / 3 - 20px);
}
.container.example .cta__item {
  margin: 20px 0 0 20px;
  width: calc(100% - 20px);
  background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div class="contaier cta">
        <div class="cta__item cta__price">USE THE PRICE CALCULATOR</div>
        <div class="cta__item cta__contact">QUESTIONS - CALL US</div>
    </div>
    <!-- Example with my code -->
    <div class="container listing example">
        <div class="listing__item">One</div>
        <div class="listing__item">Two</div>
        <div class="listing__item">Three</div>
        <div class="listing__item">Four</div>
        <div class="listing__item">Five</div>
        <div class="listing__item">Six</div>
        <div class="listing__item">Eleven</div>
        <div class="listing__item">Twelve</div>
        <div class="listing__item">Thirteen</div>
        <div class="listing__item">Fourteen</div>
        <div class="listing__item">Fifthteen</div>
        <div class="listing__item">Sixteen</div>
        <div class="listing__item">Seventeen</div>
        <div class="listing__item">Eightteen</div>
        <div class="listing__item">Nineteen</div>
        <div class="listing__item">Twenty</div>
        <div class="listing__item">TwentyOne</div>
        <div class="listing__item">TwentyTwo</div>
        <div class="listing__item">TwentyThree</div>
        <div class="listing__item">TwentyFour</div>
        <div class="listing__item">TwentyFive</div>
        <div class="listing__item">TwentySix</div>
        <div class="listing__item">TwentySeven</div>
        <div class="listing__item">TwentyEight</div>
        <div class="listing__item">TwentyNine</div>
        <div class="listing__item">Thirty</div>
        <div class="listing__item">ThirtyOne</div>
    </div>
</section>

Answer 1

如果您使用7n而不是6n，它将按您的需要工作。

在第6个列表项之后添加CTA，并从第4号开始每6个添加另一个CTA广告（jQuery）

1 个答案: