jquery, aggiungi div con definizione di classe

Question

Quindi vedo qui a add a div e qui come add a class ma ho problemi a combinare i due. Voglio generare un gruppo di div di una classe e di un ID specifici all'interno del div sparkLineContainer.

ho la div contenente

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

e voglio aggiungere un po 'di quanto segue ad esso

<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> 

frammento - Non ce l'ha fatta molto lontano, io sono perplesso

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

La funzione con cui sto cercando di farlo.

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); 

}

Answer 1

È necessario .append o .prepend aggiungere un div al contenitore. Vedi la mia versione di seguito,

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

Inoltre ho notato che hai id del div come #sparkLineContainer. Si dovrebbe cambiare come qui sotto,

<div id="sparkLineContainer"> 
... 

DEMO

Answer 2

add non fa quello che pensi lo fa. Stai cercando append o qualcosa di simile.

È possibile creare il div prima e definire i suoi attributi e contenuti, quindi aggiungere che:

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); 

Answer 3

Probabilmente il modo più semplice è quello di modificare solo l'innerHTML:

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

Ci sono altri modi come bene, ma questo è il metodo che uso generalmente.

Answer 4

È possibile aggiungere un div o qualsiasi altro tag con classe come:

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