如何使用jQuery/javaScript循环此对象

How to loop this object with jQuery/javaScript

本文关键字：循环 对象 javaScript 何使用 jQuery      更新时间：2023-09-26

我正在寻找一种将值传递给几个元素的方法，在这种情况下，每个列表项（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})
});   

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})
});  

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

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

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

编辑：添加计数器

不，那不是"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。

我觉得你应该用css：来做这件事

li.red {
    color: red;
}

等等。如果这不起作用（无论出于什么原因？！），并且假设你的意思是每个li已经有一个类[red|black|green]，你会：

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

但只有当only的颜色为class，即不是"fooItem red"时，这才不起作用。再说一遍，为什么不使用css？

更新：好的，所以您想在对象list上循环，获得每个键和值。您将如何选择将每个规则应用于哪个元素？

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

同样，我确信您不想将每个规则应用于同一个元素，所以您需要告诉我们您想要实现什么。

相关文章：