使用 jQuery 自动将 class 添加到 WordPress 数据库中的图像链接
Using jQuery to automatically add class to image links in WordPress database
我不得不切换灯箱脚本,因为我使用的灯箱脚本没有响应,而且网站正在转向响应式布局。很多网站都在 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");
});
它能胜任吗?除了在现场网站上,我没有办法测试这个,所以如果可能的话,我想第一时间把它做好。
你可以使用这个:
(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
无论如何都会进行,但是在较早的阶段,但是用于匹配元素的引擎必须更加努力地工作。
我认为您不需要进行所有模式匹配。如果您想将 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' );
} );
我不得不切换灯箱脚本,因为我使用的灯箱脚本没有响应,而且网站正在转向响应式布局。很多网站都在 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");
});
它能胜任吗?除了在现场网站上,我没有办法测试这个,所以如果可能的话,我想第一时间把它做好。
你可以使用这个:
(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
无论如何都会进行,但是在较早的阶段,但是用于匹配元素的引擎必须更加努力地工作。
我认为您不需要进行所有模式匹配。如果您想将 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' );
} );