jquery - ファイル拡張子が何であれ、画像をトリミングする

Question

HTML マークアップ:

<div class="postbody">
<a href="#"><img src="http://1stimg.jpg?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://2ndimg.jpeg?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://3rdimg.png?width=300"></a>
</div>
<div class="postbody">
<a href="#"><img src="http://4thimg.gif?width=300"></a>
</div>

以下のコードを使用して上の画像をトリミングしていますが、最初の画像に対してのみ機能します。

<script type="text/javascript">
$("div.postbody img").each(function() {
    var iu = this.src;
    iu = iu.substr(0, iu.indexOf('jpg')) + 'jpg?width=150&height=150&crop=1%3A1';
    this.src = iu;
});
</script>

どんな助けでも大歓迎です。

Answer 1

価値のあるものではindexOf('.')なく、より適切に使用してください。indexOf('jpg')そして、なぜ「jpg」のみに修正したいのですか? もっと小さい画像をリクエストしてみませんか？

Answer 2

拡張子と一致するかどうかに関係なく、すべてのソース属性を置き換えています。

replace を実行する前に、適切な拡張子を確認してください。

$(function() {
    $("div.postbody img").each(function() {
        var iu = this.src;
        if (iu.indexOf('jpg')!=-1) {
            iu = iu.substr(0, iu.indexOf('jpg')) + 'jpg?width=150&height=150&crop=1%3A1';
            this.src = iu;
        }
        else if (iu.indexOf('jpeg')!=-1) {
            iu = iu.substr(0, iu.indexOf('jpeg')) + 'jpeg?width=150&height=150&crop=1%3A1';
            this.src = iu;
        }
    });
});