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>

Answer 2

您可以使用find()代替另一个嵌套的.each()来缩短它。

    $('.b2').on('click', function(){
    var str = "";

    $('div', '.b2').each(function(index){
        if(index > 0){
            str += '-';
        }
        str += $(this).find('img').attr('data-id');
    })

    console.log(str); //'53-66'

});

Answer 3

如果您想使用JQuery，则可以使用JQuery方法find和map。然后只需使用Array方法join。

 var str = $( ".b2" ).find( ".imgbann" );
 str = $.map(str, (e) => $(e).data("id")).join("-") ;
 console.log(str);

$('.b2').on('click', function(){
 var str = $( ".b2" ).find( ".imgbann" );
 str = $.map(str, (e) => $(e).data("id")).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>

Answer 4

与“从类似数组的结构中获取单个值”的问题一样，答案是reduce。这是学习和理解的好功能，因为它可以解决很多问题。

在这种情况下，我将获得当前单击的div下具有“ imgbann”类的元素，将列表转换为数组，然后将数组简化为字符串。

reduce带有一个函数，该函数的“累加器”变量的当前值即数组中的当前项。它还获取当前项目和整个数组的索引，但是对于此任务，我们不需要它们。第二个参数是累加器的初始值。

然后，如果累加器有一个值，那么我们要做的就是添加一个连字符，然后加上当前元素的data-id属性的值。

$('.b2').on('click', function() {
  var str = $(this).find('.imgbann').toArray().reduce((acc, cur) => `${acc.length ? acc + '-' : ''}${cur.getAttribute('data-id')}`, '');
  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>

Answer 5

这不是最干净的答案，但是可以。尽管我必须指出，但是请尝试在div中添加一些填充，以使元素间隔开来使单击起作用。

<head> 
      <style>
      .b2{
          background-color:red;
          padding: 10px;
      }
      </style>
  </head>
  <body>
    <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>
    <script>
      let b2 = document.querySelector(".b2");
    b2.addEventListener('click',(e)=>{
        let children = Array.from(e.target.children);
        let data = children.map(child=>{
            return child.children[0].dataset.id;
            
        })
        let d = data.join('-');
        console.log(d);
        
        
    

    })
    </script>

      let b2 = document.querySelector(".b2");
        b2.addEventListener('click',(e)=>{
        let children = Array.from(e.target.children);
        let data = children.map(child=>{
            return child.children[0].dataset.id;
            
        })
        let d = data.join('-');
        console.log(d);
        })

Answer 6

您可以将这些数据ID推送到一个数组，然后从那里构建您的字符串。试试这个：

$('.b2').on('click', function() {
 var items = $(this).find('img'), 
     hold  = [],
     index = 0;
 
 items.each(function(i, e) {
   hold.push($(items[i]).data('id'));
 });

 $('.str').text('Range is ' + hold[index++] + ' - ' + hold[index++]);
 
});

.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>
  
  <p class='str'></p>
  
</div>

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

6 个答案: