jQuery将div放在两个不同的div之间

Question

我需要举例说明所有div data-id并在data-id="6"和data-id="3"之间放置data-id="9"的新div。

新的data-id也可以是id为1，所以之前没有div，但它需要在data-id 2之前（如果它存在，如果不存在则在下一个之前）最高的数字）

实施例

<div class="container">
    <div data-id="1"></div>
    <div data-id="2"></div>
    <div data-id="5"></div>
    <div data-id="7"></div>
    <div data-id="11"></div>
</div>

我需要在7到11之间添加一个data-id="9"的div。

我还在学习jQuery，所以我不知道如何实现这个目标。我尝试使用insertBefore()，但它并不像我想要的那样工作。它仅在新div为data-id="10"并且容器中存在data-id="11"时才有效。

的jsfiddle

http://jsfiddle.net/u3TH4/

Answer 1

var $container = $('.container'),
            $d = $container.find('div'),
            $n = $('<div>', { data: { id: 9 }, text: 9 });

// filter the element with smaller data-id
var $a = $d.filter(function () {
    return $(this).data('id') < 9;
}).last();

// If an element with smaller data-id exists
// insert the element after it
if ($a.length) $a.after($n);
// Otherwise prepend it to the container
else $container.prepend($n);

http://jsfiddle.net/mV9sW/

Answer 2

这是我想到的第一种方式：

function addDiv(id, content) {
    var $newDiv = $("<div></div>").attr("data-id",id).html(content),
        $container = $("div.container"),
        $divs = $container.find("div[data-id]"),
        inserted = false;
    $divs.each(function(i) {
        if (id < +$(this).attr("data-id")){
            $newDiv.insertBefore(this);
            inserted = true;
            return false;
        }
    });
    if (!inserted)
        $newDiv.appendTo($container);
}

addDiv(9,"whatever");