Duplicate the initial div and insert it after the following div by targeting its class name

Question

Duplicate the initial div and insert it after the following div by targeting its class name

I have a structure that looks like this:

<div class="container">
    <h1 class="header-div">Title 1</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <div class="image-div">image1</div>
</div>
<div class="container">
    <h1 class="header-div">Title 2</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <div class="image-div">image2</div>
</div>
<div class="container">
    <h1 class="header-div">Title 3</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <div class="image-div">image3</div>
</div>

I plan to extract h1 and add it directly after .image-div for each block.

javascript jquery html css image

Answer 1

Answer №1

There are a couple of things to keep in mind:

The appendTo function will add the content inside the specified div, not after it.
If you don't iterate through each element, all elements will be cloned together and appended for every image-div.

Here's what you can do:

$(".header-div").each( function(){
  $(this).clone().insertAfter( $(this).parent().find( ".image-div" ) );
});

Or alternatively:

$(".header-div").each( function(){
  $(this).clone().appendTo( $(this).parent() );
});

Answer 2

There are a couple of things to keep in mind:

The appendTo function will add the content inside the specified div, not after it.
If you don't iterate through each element, all elements will be cloned together and appended for every image-div.

Here's what you can do:

$(".header-div").each( function(){
  $(this).clone().insertAfter( $(this).parent().find( ".image-div" ) );
});

Or alternatively:

$(".header-div").each( function(){
  $(this).clone().appendTo( $(this).parent() );
});

Answer 3

Answer №2

Check out this Fiddle

Here is a way to achieve the desired result:

const mainContainers = $(".main-container");
$.each(mainContainers, function(index, element){
    $(element).find('.title').clone().appendTo($(element).find(".image"))
} )

The each method iterates through an array of main container elements that contain the image and title divs, moving the title to a different position in the DOM.

Answer 4

Check out this Fiddle

Here is a way to achieve the desired result:

const mainContainers = $(".main-container");
$.each(mainContainers, function(index, element){
    $(element).find('.title').clone().appendTo($(element).find(".image"))
} )

The each method iterates through an array of main container elements that contain the image and title divs, moving the title to a different position in the DOM.

Duplicate the initial div and insert it after the following div by targeting its class name

Answer №1

Answer №2

Similar questions

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

Selecting elements by their name using vanilla JavaScript

I am confused by this javascript syntax: const { headers, method, url } = request;

Attempting to enlarge an image by hovering over it proves to be futile

Convenient ways to connect data between a database and Firebase authentication system

Deactivate HTML column using the power of Jquery

What is the best method for deleting an uploaded image from a box?

"Modifying state within a child component and utilizing the refreshed value in the parent component

The implementation of binding complex types through Ajax in the model

Using SVG and CSS to color multiple paths with individual colors

Dynamically generating subitems for a menu

Removing an unused JS file from a page using Jquery/Javascript

jQuery Mobile dual range slider functioning but experiencing some glitches

Is it possible to locate the Bower configuration file in Debian if running as root?

The chai property "matchSnapshot" is not valid

Using the same Angular component with varying input values

How to adjust the size of an SVG image on an HTML webpage

AJAX request missing Authorization header

Creating a glowing shimmer using vanilla JavaScript

Preview of Hoverbox Caption