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

因为据我了解 (key,value) 对，value 应该等同于 arr[name].

Answer 1

因为 value 是 dom 元素引用而不是 jQuery 对象，所以它没有 jQuery 方法，例如 .css().

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

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

Answer 2

因为 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'});

旁注：对于那些您 do 想要遍历 jQuery 集的内容的情况，如 arr （它不是数组，顺便说一句），更常用的是 arr.each(...)，而不是 $.each(arr, ...)。您还可以将函数传递给大多数设置器，例如 css、text、html 等，如果您需要为集合中的每个元素设置不同的值：您 return 函数外元素的值。

例如，假设您要遍历一个集合，如果元素为空则将背景设置为 red，否则设置为 green：

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

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

Access key value pairs in jQuery.each()

jquery

each