如何仅使用 jquery javascript 将类添加到图像锚点答案

【问题标题】：How to add class to image anchors only with jquery javascript如何仅使用 jquery javascript 将类添加到图像锚点
【发布时间】：2020-12-18 01:57:21
【问题描述】：

在tiny-content 类的 div 中，我有一些图像锚点和文本锚点。是否可以使用 jquery 添加一个类，比如 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>

【问题讨论】：

当然可以，您只需要一种方法来确定哪些锚应该获得这样的类。您可以检查href 值是否包含图像扩展名。或者检查锚的孩子是否是孩子。努力，如果你遇到困难，请告诉我们。

标签： javascript jquery image anchor

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用此查询和.addClass()

$('div.tiny-content &gt; 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”]

【讨论】：

如果图片的路径与images不同怎么办？

【解决方案3】：

是的。

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

所以你要做的就是：

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

它将指向锚点而不是 img

【讨论】：