Question

我正在实现一个jquery函数，它能够根据现有的dom结构在正确的位置插入一个div

现有dom结构的情况如下

<!-- case 1 -->
<div class='container'>
   <div class='foo'></div>
   <div class='bar'>last bar</div>
   <div class='bar'>some bar</div>
   <div class='bar'>first bar</div>
</div>

<!-- case 2 -->
<div class='container'>
   <div class='bar'>last bar</div>
   <div class='bar'>some bar</div>
   <div class='bar'>first bar</div>
</div>


<!-- case 3 -->
<div class='container'>
</div>

在每3个案例中，它应该在第一个<div class='bar'></div>之前的容器中添加一个新的<div class='bar'></div>

这里的代码适用于案例1和2，但不适用于3。

var last_bar = $('<div>').addClass('bar').text('last bar');
$($('.container').find('.bar')[0]).prepend(last_bar);

有关如何使此代码更通用的任何提示？

这是演示http://jsfiddle.net/3wFda/

Answer 1

试试这个：

var last_bar = $('<div>').addClass('bar').text('last bar');
$($('.container').find('.bar')[0] || $('.container')).prepend(last_bar);

Answer 2

这只是我，但我喜欢把事情包装在像这样的新功能......

$.fn.addBar = function() {
    $(this).each(function() {
        var $last_bar = $('<div>').addClass('bar').text('last bar');
        if ($(this).find(".bar").length == 0) {
            $(this).append($last_bar);
        } else {
            $(this).find('.bar:first').prepend($last_bar); 
        }
    });
};

然后你就这样称呼它......

$(".container").addBar();

这是一个更新的jsfiddle http://jsfiddle.net/3wFda/2/

Answer 3

$('.container').find('.bar:first').prepend(...)

编辑您的案例3需要一些额外的工作。

var $c = $('.container');
if($c.contains('.bar').length) {
    $c.find('.bar:first').prepend(...)
} else {
    $c.append(...)
}

Answer 4

你可以这样做，

var last_bar = $('<div>').addClass('bar').text('last bar');
$('.container .bar:eq(0), .container:empty').prepend(last_bar);

在正确的位置插入元素的最佳方法

4 个答案: