CODEWITHSUNDEEP
javascriptjquery
Charly
Charly

Reputation: 189

How to prevent jQuery apendTo from duplicating content

I'm trying to move a div(.titleContainer) inside another div(.imageContainer a) by using jQuery prependTo function, but for some reason the the content that was previously appended is also added to the element that's receiving an appended element. Thanks! 

$(document).ready(function () {
    $('.titleContainer').each(function(){
        $(this).prependTo('.imageContainer a');
    });
});
.imageContainer{
    background: rgb(144, 144, 221);
}
.card{
    margin-right: 20px; 
    flex: 0 0 30%;
}
h3{
    color: black
}
body{
    display: flex;
    justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="card">
        <div class="titleContainer">
            <h3>title1</h3>
        </div>
        <div class="imageContainer">
            <a href="">
                <img src="" alt="">
            </a>
        </div>
    </div>

    <div class="card">
        <div class="titleContainer">
            <h3>title2</h3>
        </div>
        <div class="imageContainer">
            <a href="">
                <img src="" alt="">
            </a>
        </div>
    </div>

    <div class="card">
        <div class="titleContainer">
            <h3>title3</h3>
        </div>
        <div class="imageContainer">
            <a href="">
                <img src="" alt="">
            </a>
        </div>
    </div>

</body>

Upvotes: 2

Views: 49

Answers (2)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You need to target .imageContainer within the same .card. Using '.imageContainer a' will target all a

$(document).ready(function() {
  $('.titleContainer').each(function() {
    $(this).prependTo($(this).closest('.card').find('.imageContainer a'));
  });
});
.imageContainer {
  background: rgb(144, 144, 221);
}

.card {
  margin-right: 20px;
  flex: 0 0 30%;
}

h3 {
  color: black
}

body {
  display: flex;
  justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="card">
    <div class="titleContainer">
      <h3>title1</h3>
    </div>
    <div class="imageContainer">
      <a href="">
        <img src="" alt="">
      </a>
    </div>
  </div>

  <div class="card">
    <div class="titleContainer">
      <h3>title2</h3>
    </div>
    <div class="imageContainer">
      <a href="">
        <img src="" alt="">
      </a>
    </div>
  </div>

  <div class="card">
    <div class="titleContainer">
      <h3>title3</h3>
    </div>
    <div class="imageContainer">
      <a href="">
        <img src="" alt="">
      </a>
    </div>
  </div>

</body>

Upvotes: 2

Kostas Minaidis
Kostas Minaidis

Reputation: 5412

$(function(){
    $('.titleContainer').each(function(){
      $(this).prependTo($(this).next().find('a'));
    });
});

Codepen

Note: $(function(){}) === $(document).ready(function(){});

Upvotes: -1

Related Questions