8

所以我在这里看到了如何添加一个 div以及如何添加一个类，但是我在将两者结合起来时遇到了麻烦。我想在 div sparkLineContainer 中生成一大堆具有特定类和 id 的 div。

我有包含 div

<div id="#sparkLineContainer"></div>

我想添加一堆以下内容

    <div id="#sparkLineContainer">
        <div class="sparkLines" id="id1">Some stuff here</div>
        <div class="sparkLines" id="id2">Some stuff here</div>
        <div class="sparkLines" id="id3">Some stuff here</div>
// and so on
    </div>

片段 - 我没有走得很远，我很难过

$('#sparkContainer').add("div");  \\ How do I add the id and class to this div?
                                  \\ And as a repeat the function will it overwrite this?

我正在尝试使用的功能。

function renderSparklines (array1, sparkLineName, id) {
// array1 is the data for the spark line
// sparkLineName is the name of the data.  
// Turn all array values into integers
arrayStringToInt(array1);

    // Create new div of class sparkLines
$('#sparkContainer').add("div")

    // Render new spark line to
$('.sparkLines').sparkline(array1, {width:'90px'});

var htmlString = "";  //  Content to be added to new div
//  GENERATE LITTLE SPARK BOX 
    htmlString += 
                '<font class = "blueDescriptor">' + sparkLineName + '</font>'+
                '<br>'+
                '<font class = "greyDescriptorSmall">Ship to Shore</font>'+
                '<br>'+
                '<font class = "blackDescriptorSparkLine">' + array1[array1.length-1] + '</font>'+
                '<font class = "greenDescriptorSparkline">(' + (array1[array1.length-1] - array1[array1.length-2]) + ')</font>' +
                '<br>';
    $('.sparkLines').prepend(htmlString);

}

4

4 回答 4

24

add不做你认为它做的事。您正在寻找append或类似的东西。

您可以先创建 div 并定义其属性和内容，然后附加它：

var $newDiv = $("<div/>")   // creates a div element
                 .attr("id", "someID")  // adds the id
                 .addClass("someClass")   // add a class
                 .html("<div>stuff here</div>");

$("#somecontainer").append($newDiv);
于 2012-04-23T15:25:48.973 回答
9

您需要.append或.prepend向容器中添加一个 div。请参阅下面的我的版本，

var $sparkLines = $('.sparkLines');
$("#sparkLineContainer")
   .append('<div id="id' + 
            ($sparkLines.length + 1) + 
            '" class="sparkLines">Some Stuff Here</div>')

我还注意到您将 div 的 id 设置为#sparkLineContainer. 你应该改变它如下，

<div id="sparkLineContainer"> 
...

演示

于 2012-04-23T15:33:30.483 回答
3

您可以添加 div 或任何其他标签以及类，例如：

$('<div/>',{ class : 'example'}).appendTo("p");

于 2016-04-07T07:35:44.607 回答
2

可能最简单的方法是只修改innerHTML：

$("#sparkLineContainer").append('<div class="sparkLine" id="id1"></div>');

还有其他方法，但这是我通常使用的方法。

于 2012-04-23T15:26:11.227 回答