CODEWITHSUNDEEP
javascriptjquery
Robert
Robert

Reputation: 812

Prevent insertBefore duplicating content

I want to move the entire content of the .main-section-image before the .main-section .content .title. But when I use my jQuery code, the content of all other divs is duplicated.

How I can use an if condition to prevent duplicated text from adding to the area?

$('.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>

Upvotes: 1

Views: 270

Answers (1)

showdev
showdev

Reputation: 29168

You're inserting all .main-section-image elements before all .content .title elements.

Since you have multiple .main-section elements that each contain their own images and titles, multiple images are inserted before all the titles.

I suggest using jQuery's each() to make the change within each .main-section separately.
Below, I'm using jQuery's selector context, which uses find().

I also add a button and click handler to perform the insert.
But that's just for demonstration, so feel free to remove that code.

$('#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>

Edit

You asked about how to add a class after the change. You can use jQuery's addClass().
Since insertBefore returns a jQuery object, you can chain addClass afterwards, like this:

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

Here's a demonstration:

$('#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>

Upvotes: 1

Related Questions