在 jQuery.each() 中访问键值对

Question

我不明白jQuery.each函数的语义。这种代码的平静工作正常：

arr = $("#foo").find("div");
// modify css formatting for all sub-divs
$.each(arr, function(name, value) {
    arr.eq(name).css({backgroundColor:'red', fontWeight:'bold'});
});

我不明白为什么我不能直接访问这样的值

value.css({backgroundColor:'red', fontWeight:'bold'});

因为据我了解（键，值）对，值应该等同于 arr[name]。

Answer 1

因为value将是一个原始的DOM元素，而不是jQuery实例。你可以这样做：

$(value).css({backgroundColor:'red', fontWeight:'bold'});

。但是，当您为所有元素设置相同的css时，您根本不想要each：

arr = $("#foo").find("div");
// modify css formatting for all sub-divs
arr.css({backgroundColor:'red', fontWeight:'bold'});

---

旁注：对于那些你确实想遍历像arr这样的jQuery集的内容的情况（顺便说一句，它不是一个数组），更常用的是arr.each(...)，而不是$.each(arr, ...)。如果需要在集合中的每个元素上设置不同的值，您也可以将函数传递给大多数 setter，如 css、text、html 等： 从函数中返回元素的值。

例如，假设您要循环访问一个集合，并将背景设置为red元素是否为空，如果元素不为空，则设置为green：

$("selector for the elements").css("background-color", function() {
    return $.trim($(this).text()) === "" ? "red" : "green";
});

Answer 2

因为value是一个 dom 元素引用而不是 jQuery 对象，所以它没有像 .css() 这样的 jQuery 方法。

没有必要像以前那样使用迭代，您只需在arr对象上调用 .css() 方法，该对象是一个 jQuery 对象，包含对所有子div元素的引用

arr = $("#foo").find("div");
arr.css({backgroundColor:'red', fontWeight:'bold'});