如何用 jQuery/javaScript 循环这个对象

Question

我正在寻找一种将值传递给几个元素的方法，在这种情况下，每个列表项（li）都应该有一个类名（或 id）和一个字体颜色。这些值存储在一个对象中（下面的示例称为 JSON 数据对吗？）。

那么我如何使用循环所有元素以获得正确的值？

对象

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

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

Answer 3

您拥有的是一个 javascript 对象（不要与 JSON 混淆）。

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

编辑：添加计数器

Answer 4

不，这不是“JSON 数据”。您的list 变量是object literal。要遍历对象的键，您可以使用 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 或Wikipedia article 了解更多信息。

另外，如果你想将 list 对象写成 JSON，它会是：

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

不使用双引号代替单引号。根据the spec，单引号是无效的JSON。

Answer 5

在我看来，您应该使用 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]);
}

再次，我确定您不想将每个规则应用于同一个元素，因此您需要告诉我们您想要完成什么。