如何将第一个孩子移到父母的最后一个孩子的底部？

Question

我需要移到下一个父div（id =“ content”）下的第一个div（id =“ div-1”） 最后一个div（id =“ div-4”）

但是第一个div移到最后一个div

我需要成为现实

#content {
  position: relative;
}

#div-1 {
  position: absolute;
  bottom: 0;
}

<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

Answer 1

我确信使用纯CSS可能会实现。无论如何，我已经使用jQuery为您编写了一个解决方案，该解决方案以<div>中的第一个#content为目标并将其移动到最后一个位置/底部。

有用的裁判：

  

1）:first-of-type：CSS伪类表示一组同级元素中该类型的第一个元素。

     

2）.appendTo()：将匹配的元素集中的每个元素插入目标的末尾。

(function($) {
  $.fn.moveItems = function() {
    $(this).children('div:first-of-type').animate(
      500,
      function() {
        $(this).appendTo($(this).parent());
      }
    );
  }

  $("#content").moveItems();

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

Answer 2

将transform: translateY(100%);添加到第一格。

#content {
  position: relative;
}

#div-1 {
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
}

<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

Answer 3

HTML / CSS

Add transform: translateY(100%) to #div-1

JavaScript： 您可以使用片段方法。

1）声明一个片段：

var fragment = document.createDocumentFragment();

2）将所需元素添加到片段：

fragment.appendChild(document.getElementById('source'));

3）将片段附加到所需元素：

document.getElementById('destination').appendChild(fragment);

您的情况；

var fragment = document.createDocumentFragment();
fragment.appendChild(document.getElementById('div1'));
document.getElementById('div2').appendChild(fragment);

Codepen https://codepen.io/Sujithgopinath/pen/XBGbRN

Answer 4

如果您可以使用flexbox，那么多亏了order属性，您想要实现的目标将非常简单：

#content {
  display: flex;
  flex-direction: column;
}

#div-1 {
  order: 1;
}

<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

Answer 5

通过@sujeith（https://stackoverflow.com/a/51811892/2024411）改进解决方案，我创建了该函数，以便可以将所有项目从顶部推入列表的最后旋转。

function moveDiv() {
    var fragment = document.createDocumentFragment(),
        allChildDivs = document.querySelector("#content").children;
    fragment.appendChild(allChildDivs[0]);
    document.querySelector("#content").appendChild(fragment);
}

CodePen：https://codepen.io/nitinsuri/pen/djrpyo

Answer 6

根据建议的答案，我使用了以下CSS：

#content {
 display: flex;
 flex-direction: column;
}

#div-1 {
 order: 1;
}

和js：

var fragment = document.createDocumentFragment(),
allChildDivs = document.querySelector("#content").children;
fragment.appendChild(allChildDivs[0]);
document.querySelector("#content").appendChild(fragment);

谢谢大家