All geek questions in one place

How to clone and add multiple elements using jQuery?

What is an easy way to duplicate each element in a class as a sibling? For example, it should change this HTML code:

<body>
    <div> 
        <h1> Foos </h1>
        <span class='duplicate-me'> foo </span>
    </div>
    <div>
        <h1> Bars </h1> 
        <span class='duplicate-me'> bar </span>
    </div>
</body>

at

<body>
    <div> 
        <h1> Foos </h1>
        <span class='duplicate-me'> foo </span>
        <span class='duplicate-me'> foo </span>
    </div>
    <div>
        <h1> Bars </h1> 
        <span class='duplicate-me'> bar </span>
        <span class='duplicate-me'> bar </span>
    </div>
</body>

thank

+4
source share
4 answers
$('.duplicate-me').after(function() {
  return $(this).clone();
});

Use the after method from jQuery and call the clone method on the function you pass to it.

References: http://api.jquery.com/after/

http://api.jquery.com/clone/

Example: https://jsfiddle.net/2y6cqLrq/

+2
source

There you go - appendto the parent element after the cloningelement duplicate-me.

:

$(function(){
  $('.duplicate-me').each(function(){
    $(this).parent().append($(this).clone());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>
    <h1> Foos </h1>
    <span class='duplicate-me'> foo </span>
  </div>
  <div>
    <h1> Bars </h1> 
    <span class='duplicate-me'> bar </span>
  </div>
</body>
Hide result
+2

insertAfter, , clone

$(function(){
  $('.duplicate-me').each(function(){
    $(this).clone().insertAfter($(this))
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>
    <h1> Foos </h1>
    <span class='duplicate-me'> foo </span>
  </div>
  <div>
    <h1> Bars </h1> 
    <span class='duplicate-me'> bar </span>
  </div>
</body>
Hide result
+2
source

All you need is:

1) Clone elements with a class .duplicate-me.

2) Add these elements to the closestdiv that is them parent.

Please try the following:

$('.duplicate-me').each(function(){
    var clone= $(this).clone();
    $(this).closest('div').append(clone);
});

Literature:

$('.duplicate-me').each(function(){
     var clone= $(this).clone();
     $(this).closest('div').append(clone);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>
    <h1> Foos </h1>
    <span class='duplicate-me'> foo </span>
  </div>
  <div>
    <h1> Bars </h1> 
    <span class='duplicate-me'> bar </span>
  </div>
</body>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1663768/

More articles:


All Articles