для каждого результата json, добавьте css с jQuery класса

Question

Я пытаюсь добавить цвет для параметров фильтра в своем веб-магазине. Коды цветов сохраняются, теперь я возвращаю их через json. То, что я пытаюсь сделать, - добавить цветовой код к родительскому классу над входом. Я узнал, как изменить имя класса (что мне нужно по другим причинам), но теперь я должен добавить цветовые коды, чтобы json вернул их сверху вниз.

Вот что я получил до сих пор:

function onDataReceived(data) { 
     for (var i = 0; i < data.colorInfo.length; i++) { 
      console.log(data.colorInfo[i].colorCode); 
     } 

     $('input[id^="filter_"]').each(function(){ 
      $(this).parent().attr('class','addedClass'); 
      $(this).parent().parent().attr('class','addedClass'); 
     }); 
    } 

    $(document).ready(function() { 

      var url = 'myjsonlink.json'; 
      $.get(url, onDataReceived); 

    }); 

Линия с console.log (data.colorInfo [я] .colorCode); приводит к 3 цветовым кодам, мне нужно #fff и т. д. Есть ли способ вставить каждый из результатов выше трех типов ввода, которые у меня есть?

Что я хотел бы достичь, это:

<div style="background-color: data.colorInfo[i].colorCode"> <input> </div> 

что-то подобное

Answer 1

function onDataReceived(data) { 
    //for (var i = 0; i < data.colorInfo.length; i++) { 
    // console.log(data.colorInfo[i].colorCode); 
    //} 
    var len = data.colorInfo.length; 

    $('input[id^="filter_"]').each(function(i){ 
     $(this).parent().addClass('addedClass');//attr('class','addedClass'); 
     $(this).parent().parent().addClass('addedClass') 
       .css('background-color',"'" + data.colorInfo[i % len].colorCode + "'"); 
//.attr('class','addedClass'); 
    }); 
} 

Answer 2

Я думаю, что мой подход был бы получить строку с именами классов из DOM элемента:

var classString = $(this).parent().attr('class','addedClass'); 

Затем разделите его и пропустите через него:

var newClasses = []; //initalize the new classes array 
var classes = classString.split(/ /); 
for(var a=0; a<classes.length; a++){ 
    var colorObj = data.colorInfo[a]; //get the relevant color object 
    if(colorObj){ 
     newClasses.push(classes[a] + '-' + colorObj.colorCode); // 
    } 
} 

А потом заменить старые классы с новосозданными:

$(this).parent().attr('class', newClasses.join(' ')); 

Что-то вроде этого. Вы можете сначала проверить его;)