jquery, thêm div với định nghĩa lớp

Question

Vì vậy, tôi thấy ở đây ra add a div và tại đây cách add a class nhưng tôi gặp sự cố khi kết hợp cả hai. Tôi muốn tạo ra một bó toàn bộ các div của một lớp và id cụ thể trong div sparkLineContainer.

Tôi có div chứa

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

và tôi muốn thêm một loạt các nội dung sau để nó

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

đoạn - Tôi không làm cho nó rất xa, tôi stumped

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

Hàm tôi đang cố thực hiện việc này.

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

Bạn cần .append hoặc .prepend để thêm div vào vùng chứa. Xem phiên bản của tôi bên dưới,

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

Ngoài ra, tôi nhận thấy rằng bạn có id của div là #sparkLineContainer. Bạn nên thay đổi nó như dưới đây,

<div id="sparkLineContainer"> 
... 

DEMO

Answer 2

add không làm những gì bạn nghĩ rằng nó. Bạn đang tìm kiếm append hoặc một cái gì đó tương tự.

Bạn có thể tạo các div đầu tiên và xác định các thuộc tính và nội dung của nó, sau đó nối nó:

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

Có lẽ cách đơn giản nhất là chỉ cần thay đổi innerHTML:

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

Có những cách khác như tốt, nhưng đây là phương pháp tôi thường sử dụng.

Answer 4

Bạn có thể thêm một div hoặc bất kỳ thẻ khác cùng với lớp như:

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