使用jQuery

Question

我正在尝试使用jQuery在另一个上层div中move进行整个div。对于此操作的单个实例，此处提供的答案很好用here，但就我而言，我有多个需要移动的div实例。

当我应用上面的代码时，所有.film-desc都递归地移到每个.grid-item中。

必须使用以下命令触发操作： <span><i class="fas fa-list"></i></span>

到目前为止，我的代码必须如下所示：

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

Answer 1

您可以遍历它们并将每个对象移动到相关的div上，例如：

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

有效代码段：

$("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>