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

基本上我抓住了href和src值的最后一部分，将它们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 回答