时间戳

首页 > 解决方案 > 防止 insertBefore 复制内容

javascript - 防止 insertBefore 复制内容

问题描述

我想移动.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>

标签： javascriptjquery

解决方案

您在所有元素之前插入所有 元素。.main-section-image .content .title

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

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

我还添加了一个按钮和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>

推荐阅读