2

スタイルをjquery追加機能にチェーンすることは可能ですか? 私はこのようなことを達成しようとしています。しかし、現在はうまく機能していません。私は間違ったアプローチをしているかもしれません。

for (i = 0; i < store.image().length; i++) {
     $('#carousel-inner')
          .append($("<div> </div>"))
          .addClass("shop-image item")
          .css('background-image', 'url(' + store.image()[i] + ')');
     }
}
4

5 に答える 5

4

classandbackgroundを新しいdiv要素に追加する場合は、次のようにします。

for (i = 0; i < store.image().length; i++) {
    var $div = $('<div>').addClass('shop-image item')
                         .css('background-image', 'url(' + store.image()[i] + ')');

    $('#carousel-inner').append($div);
}
于 2013-06-12T14:57:44.947 に答える
3

新しい内部要素にclassandを追加しようとしている場合は、次のようになります。backgrounddiv

for (i = 0; i < store.image().length; i++) {
    $('#carousel-inner').append(
        $("<div />").addClass("shop-image item")
            .css('background-image', 'url(' + store.image()[i] + ')')
    );
}

あなたの質問にあるように、クラスと背景画像を #carousel-inner に追加し、内部の div には追加しません。

また、コンソールにログstore.image()[i]を記録して、期待どおりになっていることを確認しましたlinkか? そうでない場合は、 for ステートメント内にconsole.log("image["+i+"]:", store.image()[i])開発者コンソールを追加して確認し、何が得られるかを確認してください。

複数のアイテムを追加することもできます。各アイテムの,間に追加するだけで、それぞれに独自のプロパティがあり、内部要素に追加することもできます!

for (i = 0; i < store.image().length; i++) {
    $('#carousel-inner').append(
        $("<div />").addClass("shop-image item")
            .css('background-image', 'url(' + store.image()[i] + ')'),  //  <-- see the pretty comma!
        $("<div />").addClass("shop-image item")
            .css('background-image bg-copy', 'url(' + store.image()[i] + ')'),  //  <-- see the pretty comma!
        $("<span />", { text: "I'm a Silly String!" }).addClass("silly-string")
            .append(    //  here i add an inner element to this span!
                $("<span />", { text: " I'm inside this silly string!" })
            )
    );
}
于 2013-06-12T14:58:44.073 に答える
2

何かの長さを取得するためだけに関数を呼び出すべきではありません。何store.image()が返されるかはわかりませんが、配列のように見えるものだと推測しています。結果を反復して関数を 1 回呼び出すだけで、 を使用できます$.each。
このようなループ内で新しく作成された要素に属性を設定するには、次のようにします。

$.each(store.image(), function(i, img) {
    $('<div />', {
                  'class':'shop-image item',
                   style : 'background-image : url('+img+');'
                 }
    ).appendTo('#carousel-inner');
});
于 2013-06-12T15:06:50.467 に答える
2

appendTo()を使用できます：

for (i = 0; i < store.image().length; i++) {
     $('<div/>')
          .addClass("shop-image item")
          .css('background-image', 'url(' + store.image()[i] + ')')
          .appendTo('#carousel-inner');
}
于 2013-06-12T15:01:21.987 に答える