5

如果您有以下代码:

    <div class="container">

        <a href="http://testing.test/photo.jpg">
            <img src="http://testing.test/photo.jpg">
        </a>

        <a href="http://testing.test/photo.jpg">
            <img src="http://testing.test/photo-450x450.jpg">
        </a>

        <a href="http://testing.test/photo.jpg">
            <img src="http://testing.test/photo-150x150.jpg">
        </a>

        <a href="http://somethingdifferent.test">
            <img src="http://testing.test/photo.jpg">
        </a>

    </div>

我正在尝试向 A 标签中添加一个类,其中包含图像。

所以我有

$(".container").find('a').has("img").each(function () {

            $(this).addClass("testingClass");
    });  

但是,现在我想添加一个额外的检查。仅当包装它的图像 src + a href 相同或“相似”时,我才想添加该类(它们最后只有缩略图大小,即 -150x150)。

换句话说,在上面的 HTML 代码中,它将类添加到<a>1、2、3 而不是 4。

我怎样才能在 Javascript/jQuery 中做到这一点?对于第一个 a 标签,我可以简单地比较 src 值和 href 值,如果相同 = 那么 true/add 类。但是其他的并不完全一样,而且会被证明是错误的,有没有办法做到这一点?

谢谢大家的任何提示

4

3 回答 3

0

如果没有正则表达式,这样的事情会起作用:

$(".container a").has("img").each(function () {
    var hURL = $(this).attr("href");
    var iURL = $(this).children("img").attr("src");

    var imgName = iURL.slice(iURL.lastIndexOf("/")+1,iURL.lastIndexOf("."));

    var hrefPointer = hURL.slice(hURL.lastIndexOf("/")+1,hURL.lastIndexOf("."));

    if(imgName.indexOf(hrefPointer) >= 0 && hrefPointer.length > 1) {
       $(this).addClass("testingClass");
    }
});

JSFiddle

注意:这是草率的,一个更好的主意是有一个明确定义的“相似性”,您可以通过正则表达式搜索。定义一个模式,并匹配该模式,这比对字符串的巧合分析要好得多。

例如,它们是否应该仅在它们来自同一个域时才匹配?相同的完整路径

http://test.test.test/photo.jpg == 
http://test.test.test/thumbnails/photo-150x150.jpg

?

那么扩展呢?做

http://test.test.test/photo.jpg == 
http://test.test.test/photo-150x150.png

没有测试就很难定义一个函数。有关这方面的更多信息,请查看测试驱动开发的想法。

希望这有助于这个和未来的项目。

于 2013-09-10T22:03:36.787 回答
0

我试图浓缩它,但回想起来可能很难阅读,所以我将尝试在下面遍历它:

$(".container").find('a').has("img").each(function(){
    var f1 = $(this).attr('href').split('/').slice(-1)[0].split('.'),
        f2 = $(this).find('img:first').attr('src').split('/').slice(-1)[0],
        re = new RegExp('^'+f1.slice(0,f1.length-1).join('.')
             +'(?:-\\d+?x\\d+?)?\\.'+f1.slice(-1)[0]+'$');
    if(re.test(f2)) $(this).addClass("testingClass");
});  

jsFiddle

基本上我抓住了hrefsrc值的最后一部分,将它们href分成两部分(文件名和文件扩展名)并动态构建正则表达式以匹配确切名称或带有后缀的文件名-\dx\d其中\d代表任何数字。

为了更好地可视化它,正则表达式(重要位)如下所示:

/^FILE_NAME(?:-\d+?x\d+?)?\.FILE_EXT$/
于 2013-09-10T20:41:39.943 回答
-1

您可以从 href 中剥离扩展名并测试它是否是图像 url 的前缀(如果这满足您对“相似”的定义):

jQuery(".container a img").each(function () {
    var href_url = jQuery(this).parent("a").attr("href");
    var img_url = jQuery(this).attr("src");

    if(img_url.indexOf(href_url.substring(0, href_url.lastIndexOf("."))) == 0) {
       jQuery(this).parent("a").addClass("testingClass");
    }
});

编辑:修复了添加类a标签并替换startsWith为的原始代码indexOf == 0,因为startsWithjavascript 中没有。jsFiddle 中的工作示例。

于 2013-09-10T17:05:53.600 回答