如何通过jQuery获取不同DIV元素的自定义HTML属性值？

问题原因 #

你用$('div[value]').attr("value")只能拿到第一个匹配元素的value，是因为jQuery的attr()方法在匹配多个元素时，默认只返回第一个元素的属性值。

解决方案 #

1. 逐个遍历处理每个元素 #

用.each()循环所有带value属性的div，逐个获取对应的值：

$('div[value]').each(function() {
  // 用$(this)指代当前循环到的div元素
  var tmb_folder = $(this).attr("value");
  // 这里可以添加你的业务逻辑，比如打印值或者进行后续处理
  console.log(tmb_folder);
});

2. 收集所有属性值到数组 #

如果需要把所有div的value值统一存到数组里，用.map()配合.get()实现：

// 把每个元素的value值映射成数组项，最后用get()转为普通数组
var allTmbFolders = $('div[value]').map(function() {
  return $(this).attr("value");
}).get();

// 输出结果示例：["videothumbs", "videothumbs2", ...]
console.log(allTmbFolders);

额外提示 #

value并不是div元素的标准HTML属性，更规范的写法是使用data-*自定义属性，比如：

<div class="xx" id="xx" data-value="videothumbs"></div>

获取时可以用：

// 两种方式都可以
$(this).attr("data-value");
// 或者用jQuery的data方法，会自动转换数据类型
$(this).data("value");

如果是现有项目无法修改DOM结构，前面的解决方案依然有效。

内容的提问来源于stack exchange，提问作者illicious