Я хочу переместить все содержимое .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>
1
Robert 7 Мар 2019 в 15:34

1 ответ

Лучший ответ

Вы вставляете все .main-section-image элементы перед всеми .content .title элементами.

Поскольку у вас есть несколько элементов .main-section, каждый из которых содержит собственные изображения и заголовки, несколько изображений вставляются перед всеми заголовками.

Я предлагаю использовать each() jQuery, чтобы внести изменения в каждый < / em> .main-section отдельно.
Ниже я использую контекст селектора jQuery, в котором используется 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>

Редактировать

Вы спросили, как добавить класс после изменения. Вы можете использовать addClass() jQuery.
Поскольку 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>
1
showdev 7 Мар 2019 в 13:20