Ragesh Sivakumar Ragesh Sivakumar - 5 months ago 12
HTML Question

css style is not working added via jquery

The below is my code....

I have four divs with spans with specific text, while running the below query only the last div span is getting orange color

function populateFavorites(result) {
$.each(result, function (key, res) {
var data = {
"ISO": res.CurveIsoCode, "Utility": res.CurveUtility, "PriceDifference": 2,
"Price": 5, "DefaultTerm": res.Term, "StartDate": formatDate(res.StartDate), "DefaultPeakPriceType": res.PeakPriceTypeName,
"ChartControl": res.FavouritesId, "ChekBoxID": res.FavouritesId
};

isoGridData.push(data);
$("#gridtarget").kendoGrid({
dataSource: isoGridData,
rowTemplate: kendo.template($("#iso-utility-detail").html())
});

GraphValues(res.CurveIsoCode, res.CurveUtility, res.PeakPriceTypeName, formatDate(res.StartDate), res.Term,
_historyType, _Url,
priceValues, priceDates, "ChartControl" + res.FavouritesId,
0, 10, 10);

$("#idcontentgrid" + res.FavouritesId + " span:contains(" + res.HistoryTypeName + ")").css('color', 'orange');
});
}


Any idea why it is? and how to apply for all the div spans?

Thanks

Answer

From what I understood from your question each time your loop works, the css you are applying are getting overrided by kendo grid.

So try removing your logic to apply css in a separate loop like this,

function populateFavorites(result) {       
    $.each(result, function (key, res) {              
        //existing code
        GraphValues(res.CurveIsoCode, res.CurveUtility, res.PeakPriceTypeName, formatDate(res.StartDate), res.Term,
                _historyType, _Url,
                priceValues, priceDates, "ChartControl" + res.FavouritesId,
                0, 10, 10);

    });

    $.each(result, function (key, res) {              
       $("#idcontentgrid" + res.FavouritesId + " span:contains(" + res.HistoryTypeName + ")").css('color', 'orange');           
    });
}