Question

我需要通过数据属性获取元素，并在 jQuery 中获取 id 的一部分。我有以下代码。

<div class="bridgeSelectedDiv" id="bridgeDiv_13234" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>
<div class="bridgeSelectedDiv" id="bridgeDiv_13432" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>
<div class="bridgeSelectedDiv" id="bridgeDiv_45646" onclick="SelectBridgeLine(this);" data-bridgeuid="b2a42066-00e2-4b6e-bdef-397468573b75"></div>

function SelectBridgeLine(element) {
 var bridgeuid = $(element).attr("data-bridgeuid");
 var partofSelectedBridgeLine = $('div[id^="bridgeDiv_"]').data("bridgeuid");
 console.log(partofSelectedBridgeLine);
}

但它只返回1个元素，而不是全部。任何线索？谢谢！

Answer 1

来自.data()

的文档

存储与匹配元素关联的任意数据，或者在指定数据存储中返回匹配元素集中第一个元素的值。

所以这里发生的是它只获取第一个元素的数据值。您需要使用.each()迭代它们以获取匹配选择器中的所有元素：

$('div[id^="bridgeDiv_"]').each(function(){
  console.log($(this).data('bridgeuid'))
});

<强> Demo

Answer 2

它只返回1个元素，因为您正在执行onclick="SelectBridgeLine(this);"，而this将始终指向存在点击处理程序的当前元素，而是执行：

$('.bridgeSelectedDiv').click(function(){
   console.log($(this).data('bridgeuid')); //you can use .data()
});

或

$('div[id^="bridgeDiv_"]').click(function() {
    console.log($(this).data('bridgeuid'));
});

Answer 3

尝试

$('div[id^="bridgeDiv_"]').each(function(){ 
   console.log($(this).data("bridgeuid")); });

在jQuery中按数据属性和id的一部分获取元素

3 个答案: