Question

您好我正在努力解决问题。结构如下： -

<div class="parent" >
    <div class="child1" >
    </div>
    <div class="childToBeKeptLast" >
    </div>
</div>

插入新孩子后

<div class="parent" >
      <div class="child1" >
    </div>
     <div class="child2" >
    </div>
    <div class="childToBeKeptLast" >
    </div>
</div>

因此，无论在父div中发生多少插入，我总是希望让我的孩子继续使用类“childToBeKeptLast”作为最后一个孩子。如何通过css或jquery实现这一点？

任何帮助将不胜感激......谢谢...

Answer 1

尝试在此背景下使用.insertBefore()，

$('.child2').insertBefore('.parent .childToBeKeptLast');

因此，上面的代码会在具有类childToBeKeptLast的元素之前插入新子元素，并且该元素是具有类parent的元素的后代

Answer 2

您还可以使用：

$('.childToBeKeptLast').before('<div class="child2"></div>');

Answer 3

对于信息，在带有年轻浏览器的CSS中，flex模型可以帮助您保留最后一个..在屏幕上看到： DEMO

需要BASIC CSS：

.parent {
  display:flex;
  flex-direction:column;
}
.childToBeKeptLast {
  order:1;
}
/* for demo, make some content*/
div:before {
  content:attr(class);
}

如果您想以某种方式过滤某些浏览器，:not()选择器可以 too

:not(.childToBeKeptLast) {
  order:-1;/* puts anything that has not this class up in front */
}

演示的HTML：

<div class="parent" >
    <div class="child1" >
    </div>
    <div class="childToBeKeptLast" >
    </div>
      <div class="child1" >
    </div>
      <div class="whatever clss wich is not meant to be last seen" >
    </div>
      <div class="child1" >
    </div>
      <div class="child1" >
    </div>
</div>

即使在将任何新div附加到其父级之后，也将div保留为其父级的最后一个子级

3 个答案: