3

既存のdom構造に応じて適切な場所にdivを挿入できるjquery関数を実装しています

既存の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)​;

</ p>

このコードをより一般的にするためのヒントはありますか？

これがデモですhttp://jsfiddle.net/3wFda/

4

4 に答える 4

1

これを試して：

var last_bar = $('<div>').addClass('bar').text('last bar');
$($('.container').find('.bar')[0] || $('.container')).prepend(last_bar);​
于 2012-10-22T13:03:34.037 に答える
1

これは私だけですが、このような新しい関数で物事をラップするのが好きです...

$.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/

于 2012-10-22T13:09:28.920 に答える
0 
$('.container').find('.bar:first').prepend(...)

ケース3を編集するには、追加の作業が必要です。

var $c = $('.container');
if($c.contains('.bar').length) {
    $c.find('.bar:first').prepend(...)
} else {
    $c.append(...)
}
于 2012-10-22T12:59:38.170 に答える
0

代わりにこれを行うことができます、

var last_bar = $('<div>').addClass('bar').text('last bar');
$('.container .bar:eq(0), .container:empty').prepend(last_bar);​
于 2012-10-22T13:02:32.460 に答える