$('.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>

Le résultat doit être 53-66

Donc, en cliquant sur b2, j'ai besoin d'une chaîne composée de data-id de ses petits-enfants, jointe à -.

De l'aide?

0
user7461846 20 nov. 2018 à 22:00

6 réponses

Meilleure réponse

Si vous souhaitez utiliser JQuery, vous pouvez utiliser les méthodes JQuery find et map. Utilisez ensuite simplement la méthode 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>
1
zfrisch 20 nov. 2018 à 19:30

Vous pouvez pousser ces ID de données vers un tableau et créer votre chaîne à partir de là. Essaye ça:

$('.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>
0
justDan 20 nov. 2018 à 19:27

Vous pouvez utiliser find() au lieu d'un autre .each() imbriqué pour le raccourcir un peu.

    $('.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'

});
1
Katie.Sun 20 nov. 2018 à 19:21

Le .map () de JQuery correspond parfaitement à ce scénario: http://api.jquery.com/jquery.map /

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

Dans les commentaires, vous avez déclaré qu'ils avaient tous la même classe, vous pouvez donc utiliser .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>
2
freedomn-m 20 nov. 2018 à 19:29

Comme d'habitude avec les questions "obtenir une valeur unique à partir d'une structure de type tableau", la réponse est reduce. C'est une bonne fonction pour apprendre et comprendre, car elle aide avec tant de questions.

Dans ce cas, j'obtiens les éléments avec la classe "imgbann" sous le div actuellement cliqué, convertissant la liste en un tableau, puis réduisant le tableau en une chaîne.

reduce prend une fonction à laquelle la valeur actuelle d'une variable "accumulateur", l'élément courant dans le tableau. Il prend également l'index de l'élément en cours et le tableau entier, mais pour cette tâche, nous n'en avons pas besoin. Le deuxième argument est la valeur initiale de l'accumulateur si nécessaire.

Il suffit alors d'ajouter un trait d'union si l'accumulateur a une valeur, puis la valeur de l'attribut data-id de l'élément courant.

$('.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>
1
Heretic Monkey 20 nov. 2018 à 19:36

Pas la réponse la plus claire, mais ça marche. Bien que je doive le souligner, essayez d'ajouter du rembourrage à votre div pour espacer les éléments pour que le clic fonctionne.

<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);
        })
0
Pari Baker 20 nov. 2018 à 19:24