防止插入在复制内容之前

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 .main-section-image个元素之前插入 all .content .title个元素。

由于您有多个.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>

---

编辑

您询问了更改后如何添加课程。您可以使用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>