Question

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

这些div是在容器div中动态创建的（appendchild）。现在，每个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

纯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 2

您可以使用以下函数轻松地使用JQuery。

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

UPDATED FIDDLE

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

Answer 3

试试这个

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 4

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

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

Demo

Answer 5

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 6

看一下关于dom项重新排序的answer。

基本上，您必须维持一个决定排序的状态。插入项目时（请参阅下面的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 7

试试这个：

$("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的链接，然后点击它时调用此代码

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

7 个答案: