如何仅使用 jquery javascript 将 class 添加到图像锚点

Question

在 div 和 class tiny-content 中，我有一些图像锚点和文本锚点。是否可以使用 jquery 添加 class，让我们说 lb-anchor（灯箱锚点）仅添加到图像锚点？

现在是这样的情况：

<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>

应该是：

<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>

Answer 1

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

Answer 2

您可以使用此查询和 .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>

参考

Child Selector (“parent > child”)

Attribute Starts With Selector [name^=”value”]

Answer 3

是的。

你可以在 addClass() 之前尝试 parent() 函数。

所以您只需：

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

它将指向锚而不是 img

如何仅使用 jquery javascript 将 class 添加到图像锚点

How to add class to image anchors only with jquery javascript

javascript

anchor

jquery

image

参考