Dans un div avec la classe tiny-content, j'ai des ancres d'image et des ancres de texte. Est-il possible avec jquery d'ajouter une classe, disons lb-anchor (ancre lightbox) uniquement aux ancres d'image?

Voici la situation actuelle:

<div class="tiny-content">
    <a href="images/1.jpg"><img src="images/1.jpg" /></a>
    <a href="images/2.jpg"><img src="images/2.jpg" /></a>
    <a href="images/3.jpg"><img src="images/3.jpg" /></a>
                        
    <a href="example.com">Normal link</a>
    <a href="example.com">Normal link</a>
</div>

Et ça devrait être:

<div class="tiny-content">
    <a class="lb-anchor" href="images/1.jpg"><img src="images/1.jpg" /></a>
    <a class="lb-anchor" href="images/2.jpg"><img src="images/2.jpg" /></a>
    <a class="lb-anchor" href="images/3.jpg"><img src="images/3.jpg" /></a>
                        
    <a href="example.com">Normal link</a>
    <a href="example.com">Normal link</a>
</div>
0
john 29 août 2020 à 12:39

3 réponses

Meilleure réponse
$(".tiny-content a:has(img)").addClass( "lb-anchor" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tiny-content">
    <a href="images/1.jpg"><img src="images/1.jpg" /></a>
    <a href="images/2.jpg"><img src="images/2.jpg" /></a>
    <a href="images/3.jpg"><img src="images/3.jpg" /></a>
                        
    <a href="example.com">Normal link</a>
    <a href="example.com">Normal link</a>
</div>
2
Vladan 29 août 2020 à 09:47

Oui, ça l'est.

Eh bien, vous pouvez essayer la fonction parent() avant addClass ().

Donc, tout ce que vous avez à faire, c'est:

$('.tiny-content a img').parent().addClass('lb-anchor');

Il pointerait vers l'ancre au lieu d'img

1
Alfian Firmansyah 29 août 2020 à 09:59

Vous pouvez utiliser cette requête et .addClass()

$('div.tiny-content > a[href^=images]').addClass('lb-anchor')
.lb-anchor {
  margin: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tiny-content">
  <a href="images/1.jpg"><img src="images/1.jpg" /></a>
  <a href="images/2.jpg"><img src="images/2.jpg" /></a>
  <a href="images/3.jpg"><img src="images/3.jpg" /></a>

  <a href="example.com">Normal link</a>
  <a href="example.com">Normal link</a>
</div>

Référence

Sélecteur d'enfant ("parent> enfant")

L'attribut commence par le sélecteur [name ^ = "value"]

2
hgb123 29 août 2020 à 09:50