Question

是否可以将样式链接到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] + ')');
     }
}

Answer 1

如果您想将class和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);
}

Answer 2

如果您尝试将class和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!" })
            )
    );
}

Answer 3

您可以使用appendTo()：

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

Answer 4

你真的不应该只是为了得到一些东西来调用这个函数。不确定store.image()返回什么，但我猜它看起来像一个数组，并且迭代结果并只调用一次函数，你可以使用$.each。
要在这样的循环中设置新创建的元素的属性，你可以这样做：

$.each(store.image(), function(i, img) {
    $('<div />', {
                  'class':'shop-image item',
                   style : 'background-image : url('+img+');'
                 }
    ).appendTo('#carousel-inner');
});

Answer 5

JQuery的追加函数似乎返回容器对象。所以你在每次迭代中所做的就是覆盖#carousel-inner的CSS 最简单的答案和最佳答案是使用上面由A. Wolff提到的appendTo--因为它返回刚刚创建的元素。

这是另一个可能的解决方案，它将强调您遇到的问题：
首先添加一个新的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)

链接jquery追加样式

5 个答案: