Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery, add div with class definition

So I see here how to add a div and here how to add a class but I'm having trouble combining the two. I want to generate a whole bunch of div's with a specific class and id within the div sparkLineContainer.

I have the containing div

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

and I want to add a bunch of the following to it

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

snippet - I didn't make it very far, I'm 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?

The function I'm trying to do this with.

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

}

like image 808
rd42 Avatar asked Apr 23 '12 15:04

rd42


4 Answers

add does not do what you think it does. You are looking for append or something similar.

You can create the div first and define its attributes and contents, then append it:

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);
like image 63
James Montagne Avatar answered Sep 28 '22 07:09

James Montagne


You need .append or .prepend to add a div to the container. See my version below,

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

Also I noticed that you have id of the div as #sparkLineContainer. You should change it as below,

<div id="sparkLineContainer"> 
...

DEMO

like image 33
Selvakumar Arumugam Avatar answered Sep 28 '22 07:09

Selvakumar Arumugam


You can add a div or any other tag along with class like:

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

like image 37
Ashish Kwatra Avatar answered Sep 28 '22 07:09

Ashish Kwatra


Probably the easiest way is to just modify the innerHTML:

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

There's other ways as well, but this is the method I generally use.

like image 26
Jason Kaczmarsky Avatar answered Sep 28 '22 07:09

Jason Kaczmarsky