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

如果你想将classand添加background到新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添加background到新的内部div元素，那么它更像是：

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

正如您的问题一样，它将类和 bg 图像添加到#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

您可以使用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 回答
2

你真的不应该仅仅为了得到一些东西而调用这个函数。不确定store.image()返回什么，但我猜它看起来像一个数组，并且要迭代结果并只调用一次函数，您可以使用$.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 回答
0

JQuery 的 append 函数似乎返回了容器对象。因此，您在每次迭代中所做的是覆盖#carousel-inner.
最简单的答案和最佳答案是使用 appendTo——正如 A. Wolff 上面提到的——因为它返回您刚刚创建的元素。

这是另一个可能的解决方案，将强调您遇到的问题：
首先附加一个新的 div。然后选择刚刚创建的 div。 

var colors = ["#0F3D4C", "#1F7A99", "#2EB8E6", "#5CD6FF", "#99E6FF"];
for (var i = 0; i < colors.length; i++)
{
    $('#colors_container')
    .append("<div></div>");
    $('#colors_container div:last-child')
    .html("Color " + i)
    .css('background-color', colors[i]);
 }

请注意所有 D3 粉丝：D3 的追加不能以这种方式工作。
当您在 D3 中追加一个元素时，D3 的追加返回您刚刚创建的子项。然后，您可以将另一个函数链接到它，而无需做所有这些额外的工作。

我遇到了这个问题，因为我遇到了一种情况，我想将一些代码
d3.select("#" + container).append("div")
从
$("<div></div>").appendTo("#" + container)

于 2014-11-11T16:21:24.640 回答