Append a div in another div in a multiple of instances using jQuery

Question

I am trying to move an entire div inside another upper-level div using jQuery. For a single instance of this action, the answer provided here works just fine here, but in my case, I've got multiple instances of these divs that I need to move.

When I apply the code above, all .film-desc were moved recursively into each .grid-item.

The action must be triggered using: <span><i class="fas fa-list"></i></span>

So far the code I have to look like this:

$(".fa-list").click(function() {
  $(this).siblings().next(".film-desc").appendTo(".card-image");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span>
  <i class="fas fa-list"></i>
</span>
<div class="grid-item">
  <div class="card">
    <div class="card-image">
      <img src="#">
      <div class="card-data">
        <h5>1983</h5>
        <div>
          <span>Q: 6.3</span>
          <span>R: 6.8</span>
          <span>A: 3.6</span>
        </div>
        <div>
          <span>M</span>
          <span>N</span>
          <span>P</span>
        </div>
      </div>
    </div>
    <div class="film-desc">
      content
    </div>
  </div>
</div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>

Thanks for the comments. Out of curiosity, must people downvote when they make a comment? I did put in an effort to ask the question, `fa-list` was in my original question just because I didn't include it where `you` expected, then you downvote? Thanks for the comment anyway. — hello, Sep 06 '18 at 15:15
The question mentioned the use of the `fa-list` and included script that referenced it, however it was not included in the markup to show how the script would be (or should be) using it. This defines an incomplete/ambiguous question. Until issue like that are fixed, a question may be down voted. @hello Edit: also it's entirely up to the users if they want to downvote a question or not. They earned the rep to downvote with, they get to choose if they feel your question is worth a downvote or not. — Taplar, Sep 06 '18 at 15:19

Zakaria Acharki · Accepted Answer · 2018-09-06T15:13:56.360

You could loop through them and move every one to the related div like :

$(".fa-list").click(function(){
  $('.grid-item').each(function(){
    $(this).find(".film-desc").appendTo( $(this).find('.card-image') );
  });
})

Working snippet:

$("button").click(function() {
  $('.grid-item').each(function() {
    $(this).find(".film-desc").appendTo($(this).find('.card-image'));
  });
})

.card-image {
  background-color: yellow;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button">Move divs</button>
<div class="grid-item">
  <div class="card">
    <div class="card-image">
      <div class="card-data">
        <div>
          <span>Q: 6.3</span>
          <span>R: 6.8</span>
          <span>A: 3.6</span>
        </div>
        <div>
          <span>M</span>
          <span>N</span>
          <span>P</span>
        </div>
      </div>
    </div>
    <div class="film-desc">
      content
    </div>
  </div>
</div>
<br>
<div class="grid-item">
  <div class="card">
    <div class="card-image">
      <div class="card-data">
        <div>
          <span>Q: 6.3</span>
          <span>R: 6.8</span>
          <span>A: 3.6</span>
        </div>
        <div>
          <span>M</span>
          <span>N</span>
          <span>P</span>
        </div>
      </div>
    </div>
    <div class="film-desc">
      content
    </div>
  </div>
</div>
<br>
<div class="grid-item">
  <div class="card">
    <div class="card-image">
      <div class="card-data">
        <div>
          <span>Q: 6.3</span>
          <span>R: 6.8</span>
          <span>A: 3.6</span>
        </div>
        <div>
          <span>M</span>
          <span>N</span>
          <span>P</span>
        </div>
      </div>
    </div>
    <div class="film-desc">
      content
    </div>
  </div>
</div>
<br>
<div class="grid-item">
  <div class="card">
    <div class="card-image">
      <div class="card-data">
        <div>
          <span>Q: 6.3</span>
          <span>R: 6.8</span>
          <span>A: 3.6</span>
        </div>
        <div>
          <span>M</span>
          <span>N</span>
          <span>P</span>
        </div>
      </div>
    </div>
    <div class="film-desc">
      content
    </div>
  </div>
</div>

This works exactly the way I want. Thank you. Not sure what or why you're getting the negative votes, but it worked for me. Thanks. — hello, Sep 06 '18 at 15:12
@taplar could you share with us the reason of downvoting a working answer? — Zakaria Acharki, Sep 06 '18 at 15:29

Append a div in another div in a multiple of instances using jQuery

1 Answers1