I am currently working on setting the left property of a class based on the id of a li tag. The li tags are being dynamically generated as shown below:
.js
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
$.each(months, function (i, v) {
var li = $('<li id="sp_month_' + v + '">' + v + '</li>');
$('#servicePlanMonths').append(li);
});
The ids of the LI tags are like sp_month_jan and so on....
Now I want to use these ids to set the .css left property of another div (also dynamically generated as shown below) to match each li id. Here is the code for generating the other div:
.js
function DrawSPPriorityTimeLine(curelement, priorityObj)
{
var priorityMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var timeFrame = priorityObj.TimeFrames();
var activityTotalMonth = [];
if (timeFrame.trim().length > 0 && timeFrame.trim() != "On-going") {
var startMonth = jQuery.inArray(timeFrame.split('-')[0].trim(), priorityMonth);
var endMonth = (timeFrame.split('-').length > 1) ? jQuery.inArray(timeFrame.split('-')[1].trim(), priorityMonth) : startMonth;
} else {
var startMonth = 0;
var endMonth = 11;
}
var activityMonth = (endMonth - startMonth + 1) * 3 - 2;
for (var j = 0; j <= activityMonth; j++)
activityTotalMonth.push(j);
$.each(activityTotalMonth, function (i, v) {
var div = $('<div>').addClass('counts');
$(curelement).find('.bar-steps').append(div);
});
}
.css
.bar-steps .counts {
width: 3px;
height: 3px;
float: left;
background: #999;
margin-right: 22px;
border-radius: 50px;
}
The div is dynamically generated and the class "counts" is appended to render the style.
The issue arises when these divs (with the counts class) are generated, they do not align with the li tags.
Using the Li tags, I have successfully displayed the month names horizontally. Now I am attempting to align the left property of the other divs (using the counts class) to start rendering from the same position as where the li text (e.g., month name Feb) is displayed.