使用 jQuery 自动将 class 添加到 WordPress 数据库中的图像链接

Question

我不得不切换灯箱脚本，因为我使用的灯箱脚本没有响应，而且网站正在转向响应式布局。很多网站都在 WordPress 中，我要切换到的脚本没有 WordPress 插件。我想我真正需要做的就是使用 jQuery 将 class 插入到图像 link 中，当它们 link 到另一个图像时。其余的我可以在 header.php 文件中处理。我知道 Javascript 的数量可以写在邮票的背面，所以如果有人能告诉我这是否有效（或者是否有更好的方法），我将不胜感激？

如果我添加

<script src="http://code.jquery.com/jquery-latest.min.js.js"></script>

到header加一个link到包含以下代码的.js文件

    jQuery(document).ready(function() {

    jQuery("a[href$='jpg'] img, a[href$='JPG'] img, a[href$='jpeg'] img, a[href$='JPEG'] img, a[href$='png'] img, a[href$='PNG'] img, a[href$='gif'] img, a[href$='GIF'] img").parent().addClass("theClass");

});

它能胜任吗？除了在现场网站上，我没有办法测试这个，所以如果可能的话，我想第一时间把它做好。

Answer 1

你可以使用这个：

(function($){
    $(function(){
        $('a').filter(function(){
            return this.href && this.href.match(/\.(?:jpe?g|gif|bmp|a?png)$/i);
        }).find('img').addClass('the-class');
    });
})(jQuery);

这将搜索每个 link 并过滤掉不指向图像的那些，然后将 class 应用于图像（避免 class 带有大写字母，使用破折号 -).
该匹配不区分大小写，因此它将匹配 a.JpG 以及 a.jpg.
它匹配的文件扩展名是jpg、jpeg、png、apng、gif和bmp.
括号内可以添加更多，用|.

隔开

如果要申请 link 著名的 class，请删除 .find('img')。

现在，为什么我要使用 this.href && this.href.match() 而不是使用选择器 a[href]？
这只是出于性能原因：减轻对选择器的解析，因此它可以使用 document.getElementsByTagName('a')。检查 this.href 无论如何都会进行，但是在较早的阶段，但是用于匹配元素的引擎必须更加努力地工作。

Answer 2

我认为您不需要进行所有模式匹配。如果您想将 class 添加到任何 link 的图像，请尝试：

jQuery( document ).ready( function(){
  // Add the class to the image
  jQuery( 'a > img' ).addClass( 'newClass' );
  // or add the class to the link
  jQuery( 'a > img' ).parent().addClass( 'newClass' ); 
} );

这只会影响包裹在 link 标签中的图像，但不会影响任何其他 link、PDF 等

更新

要定位 href 是图像的 links，您可以使用类似这样的东西（根据需要添加或更改扩展名）：

jQuery( document ).ready( function(){
  jQuery( 'a[href$=".gif"], a[href$=".jpg"], a[href$=".png"]' ).addClass( 'newClass' );
} );

使用 jQuery 自动将 class 添加到 WordPress 数据库中的图像链接

Using jQuery to automatically add class to image links in WordPress database

jquery

wordpress

lightbox