比较img src +一个换行url字符串,看它们是否“相似”

时间:2013-09-10 16:40:59

标签: javascript jquery

如果您有以下代码:

    <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中执行此操作?对于第一个标签,我可以简单地比较src值和href值,如果相同=则为true / add class。但是其他的并不严格,并且会变得虚假,有没有办法做到这一点?

感谢各位提示

3 个答案:

答案 0 :(得分: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分成两部分(文件名和文件扩展名)并构建一个regular expression即时匹配确切名称或文件名,后缀为-\dx\d,其中\d代表任意数字。

为了更好地可视化,Regex(重要位)内容如下:

/^FILE_NAME(?:-\d+?x\d+?)?\.FILE_EXT$/

答案 1 :(得分: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

没有测试就很难定义一个函数。有关详细信息,请查看Test Driven Development的想法。

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

答案 2 :(得分:-1)

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

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,因为没有startsWith JavaScript的。 working example in jsFiddle