在旧 div 之上设置一个新创建的 div

Question

我在一个容器中有一堆 div。内容 div 的位置是相对的，因为我希望它们一个在另一个下方，并且它们的高度是未知的。

这些 div 是在容器 div 内动态创建的（附加子项）。现在，每个 div 都出现在堆栈的末尾（底部），但我的要求是 div 也有一个“最新的优先”选项，也就是说，每个新 div 都出现在顶部，而不是内容 div 的底部（如果用户在设置中选择“最新的优先”）。

html:

<div class="container">
    <div id="div1" class="content">aaa<br>aaa</div>
    <div id="div2" class="content">bbb<br><br>bbb</div>
    <div id="div3" class="content">ccc</div>
    <div id="div4" class="content">ddd</div>
</div>

css:

.container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid red;
}

.content {
    position: relative;
    top: 0px;
    left: 5px;
    width: 200px;
    height: auto;
    border: 1px solid blue;
    margin: 3px;
}

http://jsfiddle.net/jk559/1/

所以我希望最终用户可见的顺序是：div4、div3、div2、div1。

我怎样才能做到这一点？ (css/js)

最好没有 jquery。

感谢您的建议！

Answer 1

试试这个：

$("div[id*=div]").sort(function(a,b){
    if(a.id > b.id) {
        return -1;
    } else {
        return 1;
    }
}).each(function() { 
    var elem = $(this);
    $(".container").append(elem);
});

这将像这样对容器内的 div 进行排序：div4, div3, div2, div1

如果您想将订单更改为：div1, div2, div3, div4，只需将 if(a.id > b.id) 更改为 if(a.id < b.id)

您可以添加一个名为change order 的链接，然后在单击时调用此代码

Answer 2

看看这个answer关于重新排序dom项目。

基本上，您必须维护一个决定排序的状态。当您插入项目时（请参阅下面的insertItem），您会根据状态追加或前置。当用户选择最新的第一个选项时（参见下面的newFirst），您首先反转 dom 元素，然后翻转状态，以便后续插入发生在正确的位置。

var newFirst = false;
var list = document.getElementById('my-list');

function newFirst() {      
    var items = list.childNodes;
    var itemsArr = [];
    for (var i in items) {
        if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
            itemsArr.push(items[i]);
        }
    }

    itemsArr.reverse();

    for (i = 0; i < itemsArr.length; ++i) {
      list.appendChild(itemsArr[i]);
    }

    newFirst = !newFirst;
}

function insertItem(content) {
    var item = document.createElement("div");
    item.setAttribute("class","content");
    item.innerHTML = content;

    if(newFirst) {
        list.insertBefore(item, list.firstChild);
    } else {
        list.appendChild(item);
    }
}

Answer 3

JS FIDDLE UPDATED DEMO

使用prepend() 作为元素的第一个子元素添加

/* $( ".container" ).prepend( "Your div with id here" ); */
/* Example */

 $( ".container" ).prepend( "<div id='div5' class='content' >div5 on top </div>" );

Answer 4

您只需使用 .prepend() 即可在开头插入内容。

$(".container").prepend("<div id='div5' class='content'>eee</div>");

Demo

Answer 5

试试这个

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.setAttribute("id","div5");
theKid.setAttribute("class","content");
theKid.innerHTML = 'eee';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

演示小提琴http://jsfiddle.net/jk559/4/

Answer 6

纯css解决方案：

使用flexbox 来实现这一点。

.container {
    display:flex;
    flex-direction:column-reverse;
    justify-content: flex-end;
    align-content: flex-end;
}

Updated fiddle here.

Read more information here.

Answer 7

您可以使用 JQuery 轻松完成以下功能。

$('.container > div').each(function() {
    $(this).prependTo(this.parentNode);
});

UPDATED FIDDLE

正如您在问题中提到的，我将尝试使用纯 javascript 获得预期的输出。