J'ai un extrait HTML qui est répété à travers la page. Je voudrais prendre un certain nombre de cet extrait de code unique et l'ajouter en tant qu'attribut de données personnalisé à diviser avec une classe de livre unique.

<div class="books row">
   <div class="col-md-2 single-book">
 <p class="title">Hippie</p>
 <span>2018</span>
  </div>
<div class="col-md-2 single-book">
   <p class="title">Alchemist</p>
   <span>2015</span>
    </div>
<div class="col-md-2 single-book">
  <p class="title">The Spy</p>
  <span>2017</span>
  </div>
</div>

J'ai essayé de prendre une valeur numérique et de l'ajouter via jquery comme attribut d'année de données personnalisé

var num = $('.single-book span').text();
$('.single-book').attr('data-year',num)

Mais le problème est que ce code a pris toutes les valeurs 2018,2015,2017 et comme données-année = "201820152017". et devrait être data-year = "2018" pour le premier, data-year = "2015" pour le second, etc.

Qu'est-ce qui me manque, un indice, s'il vous plaît? Merci.

0
Marko Petković 27 janv. 2019 à 17:17

4 réponses

Meilleure réponse

Vous ciblez tous les éléments d'envergure, puis tous les éléments d'un seul livre. Vous devez vous assurer qu'ils vont ensemble:

$('.single-book').each(function() {
  $(this).attr('data-year',$(this).find('span').text())
})
3
Laurens 27 janv. 2019 à 14:21

J'espère que cela fonctionne pour toi.

 $('.single-book').each(function(){
   let num=$(this).find('span').text();
  $(this).attr('data-year',num);
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="books row">
   <div class="col-md-2 single-book">
 <p class="title">Hippie</p>
 <span>2018</span>
  </div>
<div class="col-md-2 single-book">
   <p class="title">Alchemist</p>
   <span>2015</span>
    </div>
<div class="col-md-2 single-book">
  <p class="title">The Spy</p>
  <span>2017</span>
  </div>
</div>
0
Sushil 27 janv. 2019 à 14:23

Vous devez parcourir tous les éléments pour définir l'attribut. Je préfère l'attribut .data() dans ce cas:

Stockez des données arbitraires associées aux éléments correspondants ou renvoyez la valeur dans le magasin de données nommé pour le premier élément de l'ensemble d'éléments correspondants.

$('.single-book').each(function(){
  $(this).data('year', $(this).find('span').text());
  console.log($(this).data('year')); // test
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="books row">
   <div class="col-md-2 single-book">
   <p class="title">Hippie</p>
   <span>2018</span>
</div>
<div class="col-md-2 single-book">
   <p class="title">Alchemist</p>
   <span>2015</span>
</div>
<div class="col-md-2 single-book">
  <p class="title">The Spy</p>
  <span>2017</span>
  </div>
</div>
0
Mamun 27 janv. 2019 à 14:26

Vous pouvez le faire comme ceci:

$(".single-book").attr("data-year",function() {
  return $(this).find("span").text()
});

Cela ajoutera le attribute data-year à chaque élément .single-book avec la valeur du span à l'intérieur.

Démonstration de travail

$(".single-book").attr("data-year",function() {
  return $(this).find("span").text()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="books row">
  <div class="col-md-2 single-book">
    <p class="title">Hippie</p>
    <span>2018</span>
  </div>
  <div class="col-md-2 single-book">
    <p class="title">Alchemist</p>
    <span>2015</span>
  </div>
  <div class="col-md-2 single-book">
    <p class="title">The Spy</p>
    <span>2017</span>
  </div>
</div>
2
Carsten Løvbo Andersen 27 janv. 2019 à 14:21