在单独的类上运行jQuery函数

Question

我有一些HTML元素，它们都有相同的标记。每个div都有一个唯一的父类。

因此，当我尝试编写一些jQuery来单独针对每个元素时，它会在所有实例上触发，而不管我是否指定要针对哪个类。我的想法是，通过使用（this）它将只针对div“box__wrapper-before”中的内容。

有人知道我错在哪里吗？

null

$('.box__wrapper--before').each(function() {
  $(this).find('.box__random').insertBefore('.box__item:nth-child(3');
});

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #282828;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}

h1 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 0;
}

.box__wrapper {
  color: #111;
  padding-bottom: 20px;
  padding-top: 20px;
}

.box__wrapper:nth-child(odd) {
  background: green;
}

.box__wrapper:nth-child(even) {
  background: blue;
}

.box__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.box__flex__wrapper {
  display: flex;
  justify-content: center;
  margin-left: -60px;
}

.box__item {
  padding-left: 60px;
  flex-basis: 20%;
  max-width: 20%;
}

.box__item span {
  align-items: center;
  border: 4px solid white;
  border-radius: 100px;
  display: flex;
  height: 60px;
  justify-content: center;
}

.box__one span,
.box__three span {
  background: #58b2eb;
}

.box__two span,
.box__four span {
  background: #ffa770;
}

.box__random span {
  background: #7fd28c;
}

.prod__cta__msg {
  background: red;
  bottom: 0;
  position: absolute;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box__wrapper box__wrapper--before">
  <div class="box__container">
    <div class="box__flex__wrapper">
      <div class="box__item box__one">
        <span>Div One</span>
      </div>

      <div class="box__item box__two">
        <span>Div Two</span>
      </div>

      <div class="box__item box__three">
        <span>Div Three</span>
      </div>

      <div class="box__item box__four">
        <span>Div Four</span>
      </div>

      <div class="box__item box__random">
        <span>Dynamic Div 1</span>
      </div>
    </div>
  </div>
</section>

<section class="box__wrapper box__wrapper--after">
  <div class="box__container">
    <div class="box__flex__wrapper">
      <div class="box__item box__one">
        <span>Div One</span>
      </div>

      <div class="box__item box__two">
        <span>Div Two</span>
      </div>

      <div class="box__item box__three">
        <span>Div Three</span>
      </div>

      <div class="box__item box__four">
        <span>Div Four</span>
      </div>

      <div class="box__item box__random">
        <span>Dynamic Div 2</span>
      </div>
    </div>
  </div>
</section>

null

Codepen示例：https://Codepen.io/nickelse/pen/mwbdvpw

Answer 1

问题在于：

.insertBefore('.box__item:nth-child(3)')

它将box_random附加到所有节中。

.insertbefore可以使用指定插入点的jquery对象（而不仅仅是字符串选择器），因此您可以使用this只查找相关的第n个子项：

$('.box__wrapper--before').each(function() {
  var third = $('.box__item:nth-child(3)', this);
  $(this).find('.box__random').insertBefore(third);
});

（变量不是必需的，为清楚起见显示）

原文可以写成：

$('.box__wrapper--before').each(function() {

  var third = $('.box__item:nth-child(3)');

  $(this).find('.box__random').insertBefore(third);
});

你能看到的地方

  var third = $('.box__item:nth-child(3)');

在所有父母中选择所有项目-所以需要添加特定性。

在下面给出了一个更新的片段。在这里，第二个div中的box_random没有移动，因为它不在.box_wrapper-before中。

null

$('.box__wrapper--before').each(function() {
  $(this).find('.box__random').insertBefore($('.box__item:nth-child(3)', this));
});

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #282828;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}

h1 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 0;
}

.box__wrapper {
  color: #111;
  padding-bottom: 20px;
  padding-top: 20px;
}

.box__wrapper:nth-child(odd) {
  background: green;
}

.box__wrapper:nth-child(even) {
  background: blue;
}

.box__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.box__flex__wrapper {
  display: flex;
  justify-content: center;
  margin-left: -60px;
}

.box__item {
  padding-left: 60px;
  flex-basis: 20%;
  max-width: 20%;
}

.box__item span {
  align-items: center;
  border: 4px solid white;
  border-radius: 100px;
  display: flex;
  height: 60px;
  justify-content: center;
}

.box__one span,
.box__three span {
  background: #58b2eb;
}

.box__two span,
.box__four span {
  background: #ffa770;
}

.box__random span {
  background: #7fd28c;
}

.prod__cta__msg {
  background: red;
  bottom: 0;
  position: absolute;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box__wrapper box__wrapper--before">
  <div class="box__container">
    <div class="box__flex__wrapper">
      <div class="box__item box__one">
        <span>Div One</span>
      </div>

      <div class="box__item box__two">
        <span>Div Two</span>
      </div>

      <div class="box__item box__three">
        <span>Div Three</span>
      </div>

      <div class="box__item box__four">
        <span>Div Four</span>
      </div>

      <div class="box__item box__random">
        <span>Dynamic Div 1</span>
      </div>
    </div>
  </div>
</section>

<section class="box__wrapper box__wrapper--after">
  <div class="box__container">
    <div class="box__flex__wrapper">
      <div class="box__item box__one">
        <span>Div One</span>
      </div>

      <div class="box__item box__two">
        <span>Div Two</span>
      </div>

      <div class="box__item box__three">
        <span>Div Three</span>
      </div>

      <div class="box__item box__four">
        <span>Div Four</span>
      </div>

      <div class="box__item box__random">
        <span>Dynamic Div 2</span>
      </div>
    </div>
  </div>
</section>