javascript - 从孙子的数据属性中获取字符串

Question

$('.b2').on('click', function(){
 //var str = ...
 console.log(str);
});

.b2{
background:gold;
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>
		<div class='singleb2'>
		<img class='imgbann' src='00.jpg' data-id=53 alt='img'>
</div>

		<div class='singleb2'>
		<img class='imgbann' src='01.jpg' data-id=66 alt='img'>
</div>
</div>

结果应为53-66

因此，单击 b2 我需要一个由其孙子的 data-id 组成的字符串，并用 - 连接。

有什么帮助吗？

Answer 1

JQuery 的 .map() 非常适合这种情况:http://api.jquery.com/jquery.map/

$(selector).map(function (index, element) {
  return $(element).data("id");
}).toArray().join("-");

在评论中您指出它们都具有相同的类，因此可以使用 .find(".class")

$('.b2').on('click', function() {
  var str = $(this).find(".imgbann").map(function(i, e) {
    return $(e).data("id");
  }).toArray().join("-");
  console.log(str);
});

.b2 {
  background: gold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='b2'>
  <div class='singleb2'>
    <img class='imgbann' src='00.jpg' data-id=53 alt='img'>
  </div>

  <div class='singleb2'>
    <img class='imgbann' src='01.jpg' data-id=66 alt='img'>
  </div>
</div>