javascript - 防止 insertBefore 复制内容

Question

我想将 .main-section-image 的全部内容移动到 .main-section .content .title 之前。但是当我使用我的 jQuery 代码时，所有其他 div 的内容都是重复的。

如何使用 if 条件来防止重复文本添加到该区域？

$('.main-section-image').insertBefore('.main-section .content .title');

.duo-left {float: left;}
.duo-right {float: right;}
.main-section {width: 100%; float: left;}
.main-section .content {
	width: 65%;
}

.main-section .main-section-image {
    width: 35%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
    <div class="content duo duo-right">
        <div class="title">
            <p><span class="red">TITLE</span> </p>
        </div>
        <div class="description">
            <p>Section description</p>
        </div>
    </div>
    <div class="main-section-image duo-left">
        <img src="https://via.placeholder.com/200x200.png">
    </div>
    <div class="clearfix">&nbsp;</div>
</div>

<div class="main-section">
    <div class="content duo duo-left">
        <div class="title">
            <p><span class="red">TITLE</span> </p>
        </div>
        <div class="description">
            <p>Section description</p>
        </div>
    </div>
    <div class="main-section-image duo-right">
        <img src="https://via.placeholder.com/200x200.png">
    </div>
    <div class="clearfix">&nbsp;</div>
</div>

Answer 1

您要在 all .content .title 元素之前插入 all .main-section-image 元素.

由于您有多个 .main-section 元素，每个元素都包含自己的图像和标题，因此会在所有标题之前插入多个图像。

我建议使用 jQuery 的 each()分别在 .main-section 中进行更改。
下面，我使用 jQuery 的 selector context ，它使用 find() .

我还添加了一个按钮和 click 处理程序来执行插入操作。
但这只是为了演示，所以请随意删除该代码。

$('#go').on('click', function() {

  $('.main-section').each(function() {
    var $image = $('.main-section-image', this);
    var $target = $('.content .title', this);
    $image.insertBefore($target);
  });

});

.duo-left {
  float: left;
}

.duo-right {
  float: right;
}

.main-section {
  width: 100%;
  float: left;
}

.main-section .content {
  width: 65%;
}

.main-section .main-section-image {
  width: 35%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="go">Make The Change</button>
<hr>

<div class="main-section">
  <div class="content duo duo-right">
    <div class="title">
      <p><span class="red">TITLE</span> </p>
    </div>
    <div class="description">
      <p>Section description</p>
    </div>
  </div>
  <div class="main-section-image duo-left">
    <img src="https://via.placeholder.com/100x50.png">
  </div>
  <div class="clearfix">&nbsp;</div>
</div>

<div class="main-section">
  <div class="content duo duo-left">
    <div class="title">
      <p><span class="red">TITLE</span> </p>
    </div>
    <div class="description">
      <p>Section description</p>
    </div>
  </div>
  <div class="main-section-image duo-right">
    <img src="https://via.placeholder.com/100x50.png">
  </div>
  <div class="clearfix">&nbsp;</div>
</div>

---

编辑

你问的是改完之后怎么加类(class)。您可以使用 jQuery 的 addClass() .
由于 insertBefore 返回一个 jQuery 对象，您可以在之后链接 addClass，如下所示:

$image.insertBefore($target).addClass('another-class');

这是一个演示:

$('#go').on('click', function() {

  $('.main-section').each(function() {
    var $image = $('.main-section-image', this);
    var $target = $('.content .title', this);
    $image.insertBefore($target).addClass('another-class');
  });

});

.duo-left {
  float: left;
}

.duo-right {
  float: right;
}

.main-section {
  width: 100%;
  float: left;
}

.main-section .content {
  width: 65%;
}

.main-section .main-section-image {
  width: 35%;
}

.another-class {
  outline: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="go">Make The Change</button>
<hr>

<div class="main-section">
  <div class="content duo duo-right">
    <div class="title">
      <p><span class="red">TITLE</span> </p>
    </div>
    <div class="description">
      <p>Section description</p>
    </div>
  </div>
  <div class="main-section-image duo-left">
    <img src="https://via.placeholder.com/100x50.png">
  </div>
  <div class="clearfix">&nbsp;</div>
</div>

<div class="main-section">
  <div class="content duo duo-left">
    <div class="title">
      <p><span class="red">TITLE</span> </p>
    </div>
    <div class="description">
      <p>Section description</p>
    </div>
  </div>
  <div class="main-section-image duo-right">
    <img src="https://via.placeholder.com/100x50.png">
  </div>
  <div class="clearfix">&nbsp;</div>
</div>