时间戳

首页 > 解决方案 > 如何防止 jQuery apendTo 复制内容

javascript - 如何防止 jQuery apendTo 复制内容

问题描述

我正在尝试使用 jQuery prependTo 函数将 div(.titleContainer) 移动到另一个 div(.imageContainer a) 中，但由于某种原因，先前附加的内容也被添加到接收附加元素的元素中。谢谢！

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

标签： javascriptjquery

解决方案

您需要.imageContainer在同一.card. 使用'.imageContainer a'将针对所有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>

推荐阅读