Question

如果您有以下代码：

    <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。但是其他的并不严格，并且会变得虚假，有没有办法做到这一点？

感谢各位提示

Answer 1

我试图压缩它，但回想起来可能很难阅读，所以我会尝试在下面介绍它：

$(".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

基本上我抓住href和src值的最后一部分，将href分成两部分（文件名和文件扩展名）并构建一个regular expression即时匹配确切名称或文件名，后缀为-\dx\d，其中\d代表任意数字。

为了更好地可视化，Regex（重要位）内容如下：

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

Answer 2

这样的东西可以在没有正则表达式的情况下工作：

$(".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的想法。

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

Answer 3

您可以从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。

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

3 个答案: