Prevent insertBefore duplicating content2019 Community Moderator ElectionjQuery/JavaScript: accessing contents of an iframedisplay none when no images in jqueryHow to merge two arrays in JavaScript and de-duplicate itemsInternet Explorer: overflow and floatGet all unique values in a JavaScript array (remove duplicates)Set div width to sum of its children and its children's width to the sum of their childrenRemove duplicate values from JS arrayHow to define height of a container by an element within that containerDiv width depending on image width that is inside itjQuery prepend hover mouseover swap

Can anyone tell me why this program fails?

Informing my boss about remarks from a nasty colleague

How could a scammer know the apps on my phone / iTunes account?

The use of "touch" and "touch on" in context

Why did it take so long to abandon sail after steamships were demonstrated?

Know when to turn notes upside-down(eighth notes, sixteen notes, etc.)

My adviser wants to be the first author

How to generate globally unique ids for different tables of the same database?

Is a lawful good "antagonist" effective?

Can elves maintain concentration in a trance?

Define, (actually define) the "stability" and "energy" of a compound

Who is our nearest planetary neighbor, on average?

Good allowance savings plan?

Professor being mistaken for a grad student

How to explain that I do not want to visit a country due to personal safety concern?

Does this property of comaximal ideals always holds?

Did CPM support custom hardware using device drivers?

Welcoming 2019 Pi day: How to draw the letter π?

Does this AnyDice function accurately calculate the number of ogres you make unconcious with three 4th-level castings of Sleep?

What has been your most complicated TikZ drawing?

Why doesn't using two cd commands in bash script execute the second command?

Rejected in 4th interview round citing insufficient years of experience

Should we release the security issues we found in our product as CVE or we can just update those on weekly release notes?

Make a transparent 448*448 image

Prevent insertBefore duplicating content

2019 Community Moderator ElectionjQuery/JavaScript: accessing contents of an iframedisplay none when no images in jqueryHow to merge two arrays in JavaScript and de-duplicate itemsInternet Explorer: overflow and floatGet all unique values in a JavaScript array (remove duplicates)Set div width to sum of its children and its children's width to the sum of their childrenRemove duplicate values from JS arrayHow to define height of a container by an element within that containerDiv width depending on image width that is inside itjQuery prepend hover mouseover swap

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>

edited Mar 7 at 12:50

showdev

20.1k133352

asked Mar 7 at 12:34

Robert

466921

add a comment |

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>

edited Mar 7 at 12:50

showdev

20.1k133352

asked Mar 7 at 12:34

Robert

466921

add a comment |

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>

edited Mar 7 at 12:50

showdev

20.1k133352

asked Mar 7 at 12:34

Robert

466921

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>

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

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

javascript jquery

edited Mar 7 at 12:50

showdev

20.1k133352

asked Mar 7 at 12:34

Robert

466921

edited Mar 7 at 12:50

showdev

20.1k133352

asked Mar 7 at 12:34

Robert

466921

edited Mar 7 at 12:50

showdev

20.1k133352

edited Mar 7 at 12:50

showdev

20.1k133352

edited Mar 7 at 12:50

showdev

20.1k133352

asked Mar 7 at 12:34

Robert

466921

asked Mar 7 at 12:34

Robert

466921

asked Mar 7 at 12:34

Robert

466921

add a comment |

1 Answer
1

active

oldest

votes

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>

edited Mar 7 at 13:20

answered Mar 7 at 12:47

showdev

20.1k133352

Thank you so much for your answer, can you tell me please how I can use the each() function, sorry but I'm not so good in jquery :)

– Robert
Mar 7 at 12:52

Please see my example above. jQuery's each() iterates through a set of selected elements. So you can perform your insertBefore on each .main-section separately.

– showdev
Mar 7 at 12:55

I got it thank you very much, you save my day

– Robert
Mar 7 at 12:55

one small thing, we can do something to check if that .main-section div exist in page?

– Robert
Mar 7 at 12:58

If there is no .main-section, the code won't do anything. The selection will be empty and the each() function won't fire. But if you really want to check for main sections, you can use the length property like this: if ($('.main-section').length>0) ... .

– showdev
Mar 7 at 13:01

|
show 4 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55043928%2fprevent-insertbefore-duplicating-content%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

edited Mar 7 at 13:20

answered Mar 7 at 12:47

showdev

20.1k133352

Thank you so much for your answer, can you tell me please how I can use the each() function, sorry but I'm not so good in jquery :)

– Robert
Mar 7 at 12:52

Please see my example above. jQuery's each() iterates through a set of selected elements. So you can perform your insertBefore on each .main-section separately.

– showdev
Mar 7 at 12:55

I got it thank you very much, you save my day

– Robert
Mar 7 at 12:55

one small thing, we can do something to check if that .main-section div exist in page?

– Robert
Mar 7 at 12:58

If there is no .main-section, the code won't do anything. The selection will be empty and the each() function won't fire. But if you really want to check for main sections, you can use the length property like this: if ($('.main-section').length>0) ... .

– showdev
Mar 7 at 13:01

|
show 4 more comments

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>

edited Mar 7 at 13:20

answered Mar 7 at 12:47

showdev

20.1k133352

Thank you so much for your answer, can you tell me please how I can use the each() function, sorry but I'm not so good in jquery :)

– Robert
Mar 7 at 12:52

Please see my example above. jQuery's each() iterates through a set of selected elements. So you can perform your insertBefore on each .main-section separately.

– showdev
Mar 7 at 12:55

I got it thank you very much, you save my day

– Robert
Mar 7 at 12:55

one small thing, we can do something to check if that .main-section div exist in page?

– Robert
Mar 7 at 12:58

If there is no .main-section, the code won't do anything. The selection will be empty and the each() function won't fire. But if you really want to check for main sections, you can use the length property like this: if ($('.main-section').length>0) ... .

– showdev
Mar 7 at 13:01

|
show 4 more comments

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>

edited Mar 7 at 13:20

answered Mar 7 at 12:47

showdev

20.1k133352

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>

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

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

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

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

edited Mar 7 at 13:20

answered Mar 7 at 12:47

showdev

20.1k133352

edited Mar 7 at 13:20

answered Mar 7 at 12:47

showdev

20.1k133352

answered Mar 7 at 12:47

showdev

20.1k133352

answered Mar 7 at 12:47

showdev

20.1k133352

Thank you so much for your answer, can you tell me please how I can use the each() function, sorry but I'm not so good in jquery :)

– Robert
Mar 7 at 12:52

Please see my example above. jQuery's each() iterates through a set of selected elements. So you can perform your insertBefore on each .main-section separately.

– showdev
Mar 7 at 12:55

I got it thank you very much, you save my day

– Robert
Mar 7 at 12:55

one small thing, we can do something to check if that .main-section div exist in page?

– Robert
Mar 7 at 12:58

If there is no .main-section, the code won't do anything. The selection will be empty and the each() function won't fire. But if you really want to check for main sections, you can use the length property like this: if ($('.main-section').length>0) ... .

– showdev
Mar 7 at 13:01

|
show 4 more comments

Thank you so much for your answer, can you tell me please how I can use the each() function, sorry but I'm not so good in jquery :)

– Robert
Mar 7 at 12:52

Please see my example above. jQuery's each() iterates through a set of selected elements. So you can perform your insertBefore on each .main-section separately.

– showdev
Mar 7 at 12:55

I got it thank you very much, you save my day

– Robert
Mar 7 at 12:55

one small thing, we can do something to check if that .main-section div exist in page?

– Robert
Mar 7 at 12:58

If there is no .main-section, the code won't do anything. The selection will be empty and the each() function won't fire. But if you really want to check for main sections, you can use the length property like this: if ($('.main-section').length>0) ... .

– showdev
Mar 7 at 13:01

Thank you so much for your answer, can you tell me please how I can use the each() function, sorry but I'm not so good in jquery :)

– Robert
Mar 7 at 12:52

Please see my example above. jQuery's each() iterates through a set of selected elements. So you can perform your insertBefore on each .main-section separately.

– showdev
Mar 7 at 12:55

I got it thank you very much, you save my day

– Robert
Mar 7 at 12:55

one small thing, we can do something to check if that .main-section div exist in page?

– Robert
Mar 7 at 12:58

If there is no .main-section, the code won't do anything. The selection will be empty and the each() function won't fire. But if you really want to check for main sections, you can use the length property like this: if ($('.main-section').length>0) ... .

– showdev
Mar 7 at 13:01

|
show 4 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ggtcf

1 Answer
1

Edit

Your Answer

Post as a guest

1 Answer
1

1 Answer
1

Edit

Edit

Edit

Edit

Post as a guest

Popular posts from this blog

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

1 Answer 1

Edit

Your Answer

Sign up or log in

Post as a guest

Post as a guest

1 Answer 1

1 Answer 1

Edit

Edit

Edit

Edit

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

1 Answer
1

1 Answer
1

1 Answer
1