通过数据属性和jQuery中ID的一部分获取元素

Question

我需要通过jQuery中的 data属性和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'))
});

演示版

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")); });