Как зациклить этот объект с помощью jQuery / javaScript

Question

Я ищу способ передачи значений нескольким элементам, в этом случае каждый элемент списка (li) должен иметь имя класса (или идентификатор) и цвет шрифта. Значения хранятся в объекте (приведенный ниже пример называется данными JSON, верно?).

Так, как я могу использовать цикл всех элементов, чтобы получить правильные значения?

Object

var list = {'red-class':'red', 'black-class':'black', 'green-class':'green'};

Идея, как я хочу сделать это (это не работает конечно)

$('li').each(function(key, value){

   $(this).addClass(key).css({color: value})
});   

Answer 1

var styles = [];
for (var key in list) {
  styles.push({className:key, color: list[key]};
}

$('li').each(function(index, element){
   $(element).addClass(styles[index].className).css({color: styles[index].color})
});  

Answer 2

Нет, это не "данные JSON".Ваша переменная list является литералом объекта .Чтобы зациклить ключи объекта, вы должны использовать конструкцию for..in:

var list = {'red-class':'red', 'black-class':'black', 'green-class':'green'},
    key, value;

for (key in list) {
  if (!list.hasOwnproperty(key)) {
    continue;
  }
  console.log("list[" + key + "] = " + list[key]);
}

JSON - это нотация, использующая синтаксис литерала объекта JavaScript или литерала массива для представления произвольных данных.См. json.org или статью Википедии для получения дополнительной информации.

Кроме того, если вы хотите записать свой list объект как JSON, это будет:

{"red-class":"red", "black-class":"black","green-class":"green"}

Не использование двойных кавычек вместо одинарных.Одинарные кавычки являются недействительными JSON в соответствии с спецификации .

Answer 3

Мне кажется, что вы должны сделать это с помощью css:

li.red {
    color: red;
}

И так далее. Если это не сработает (по какой-то причине ?!), и, предполагая, что вы имеете в виду, что у каждого li уже есть класс [red|black|green], вы бы:

$('li').each(function(item) {
    $(this).css("color", list[this.className + "-class"]);
}

Но это только в том случае, если у вас only есть цвет в качестве класса, то есть не "fooItem red", это не сработает. Опять же, почему бы не использовать CSS?

ОБНОВЛЕНИЕ: Хорошо, значит, вы хотите перебрать свой объект list, получая каждый ключ и значение. Как вы будете выбирать, к какому элементу применить каждое правило?

for(var key in list) {
    $("some selector).addClass(key).css("color", list[key]);
}

Опять же, я уверен, что вы не хотите применять каждое правило к одному и тому же элементу, поэтому вам нужно сообщить нам, чего вы хотите достичь.

Answer 4

У вас есть объект javascript (не путать с JSON).

var counter = 0;
$.each(list, function (key, value) {
    $('li')[counter].addClass(key).css('color', value);
    counter++;
});

Редактировать: добавлен счетчик

Answer 5

for (var key in list) {
  var value = list[key];
  elem.classList.add(key);
  elem.style.color = value;
}