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/クラスを追加します。しかし、他のものは厳密には同じではなく、間違っていることがわかります。それを行う方法はありますか?

ヒントをくれてありがとう

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

テストなしで関数を定義するのは困難です。詳細については、Test Driven Developmentのアイデアをご覧ください。

これがこのプロジェクトと将来のプロジェクトに役立つことを願っています。

于 2013-09-10T22:03:36.787 に答える