web-dev-qa-db-ja.com

jquery、クラス定義でdivを追加

だから私はここ divを追加する方法 とここ クラスを追加する方法 を見るが、2つを組み合わせるのに問題がある。 divsparkLineContainer内で特定のクラスと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);

}

javascriptjqueryhtmladd
8
rd42

コンテナにdivを追加するには、.appendまたは.prependが必要です。以下の私のバージョンを参照してください、

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

また、divのIDが#sparkLineContainerであることに気付きました。以下のように変更する必要があります。

<div id="sparkLineContainer"> 
...

[〜＃〜]デモ[〜＃〜]

8
Selvakumar Arumugam

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);
20
James Montagne

次のようなクラスとともに、divまたはその他のタグを追加できます。

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

3
Ashish Kwatra

おそらく最も簡単な方法は、innerHTMLを変更することです。

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

他の方法もありますが、これは私が一般的に使用する方法です。

1
Jason Kaczmarsky