如何用jQuery获取div元素的唯一data-buid属性值并分别处理？

云原生阿岚

2026-5-27

解决方法：遍历每个匹配的div并传入对应bUID

没问题，要实现给每个带data-buid的.map div调用init函数并传入对应唯一值，你只需要用jQuery的遍历方法处理每个元素就行，下面是两种实用的实现方式：

方法1：使用`.each()`遍历（最直观）

这是最常用的方式，能清晰处理每个元素：

// 等待DOM加载完成后执行（避免元素还没渲染就执行代码）
$(document).ready(function() {
    // 选中所有带有.map类且存在data-buid属性的div
    $('div.map[data-buid]').each(function() {
        // 获取当前元素的data-buid值
        const bUID = $(this).data('buid');
        // 调用init函数，传入当前独有的bUID
        init(bUID);
    });
});

// 你的初始化函数示例
function init(bUID) {
    console.log('正在初始化bUID:', bUID);
    // 这里写你的具体初始化逻辑，比如初始化地图等
}

代码说明：

$('div.map[data-buid]')：这个选择器精准筛选出符合条件的div，避免选中没有data-buid属性的.map元素
.each()：遍历每个匹配到的元素，$(this)指向当前正在处理的div，确保拿到的是该元素独有的bUID值
$(document).ready()：确保DOM完全加载后再执行代码，防止找不到元素的问题

方法2：ES6箭头函数简化写法

如果你的项目支持ES6+语法，可以用更简洁的写法：

$(document).ready(() => {
    $('div.map[data-buid]').each((_, element) => {
        const bUID = $(element).data('buid');
        init(bUID);
    });
});

// 甚至可以更精简
// $('div.map[data-buid]').each((_, el) => init($(el).data('buid')));

额外提示

如果你需要在init函数中操作当前的div元素，可以把元素也传进去：

init(bUID, $(this));
// 然后在init函数里接收
function init(bUID, $element) {
    console.log('初始化元素:', $element, '对应的bUID:', bUID);
    // 比如给当前div添加内容：$element.text('初始化完成');
}