特定の画像名がある箇所にのみ、クラスを付与したい

Question

いつもお世話になっております。

IDのhogeとhugaのliタグの中にある、
「cookie0」という名前の画像があるimgタグにのみ、
「cookie0」というクラスを付与したいのですが、上手くいきません。

<ul id="hoge">
<li><img src="cookie1.png"></li>
<li><img src="cookie0.png"></li>
<li><img src="cookie1.png"></li>
<li><img src="cookie0.png"></li>
<li><img src="cookie3.png"></li>
<li><img src="cookie4.png"></li>
</ul>

<ul id="huga">
<li><img src="cookie0.png"></li>
<li><img src="cookie5.png"></li>
<li><img src="cookie1.png"></li>
<li><img src="cookie0.png"></li>
<li><img src="cookie3.png"></li>
<li><img src="cookie5.png"></li>
</ul>

↓ 下記のようにしたい

<ul id="hoge">
<li><img src="cookie1.png"></li>
<li><img src="cookie0.png" class="cookie0"></li>
<li><img src="cookie1.png"></li>
<li><img src="cookie0.png" class="cookie0"></li>
<li><img src="cookie3.png"></li>
<li><img src="cookie4.png"></li>
</ul>

<ul id="huga">
<li><img src="cookie0.png" class="cookie0"></li>
<li><img src="cookie5.png"></li>
<li><img src="cookie1.png"></li>
<li><img src="cookie0.png" class="cookie0"></li>
<li><img src="cookie3.png"></li>
<li><img src="cookie5.png"></li>
</ul>

var src = $("#hoge, #huga).find('img').attr('src'); で画像名を取得して、
eachで回せばできるのでは…とやってみたのですが上手くできず…。

恐れ入りますが、ご教示の程よろしくお願いいたします。

Answer 1

とりあえず完全一致で。

$( '#hoge, #huga' ).find( 'img[src="cookie0.png"]' ).addClass( 'cookie0' );
```**動くサンプル：**[https://jsfiddle.net/y8crao5L/](https://jsfiddle.net/y8crao5L/)

Answer 2

やり方は色々ありますが、
使おうとしていたeachを使用した場合は、以下みたいなコードになります。

今回はsubstr内で末尾4文字を削除と安直なことをしていますが、
末尾から数えて「.」以降の文字列を取得とかやるとベストだと思います。

$('#hoge img').each(function() {
  var self = this;
  var className = $(self).attr('src');
  className = className.substr(0, className.length - 4);
  
  $(self).addClass(className);
});

###追記
失礼しました。cookie0だけでしたね。。

$('#hoge').find('img[src="cookie0.png"]').each(function() {
  var self = this;
  var className = $(self).attr('src');
  className = className.substr(0, className.length - 4);
  
  $(self).addClass(className);
});

Answer 3

拡張子まで考慮するならこんなかんじです

• 拡張子はjpg/gif/pngのいずれかとして大文字小文字関係なし
• ファイル名は大文字小文字を区別します

<script>
$(function(){
  $('#hoge,#huga').find('img').filter(function(){
    return $(this).attr('src').match(/.+\.(jpg|png|gif)$/i)[0].match(/^cookie0\.[^\/\.]+$/);
    }).addClass('cookie0');
});
</script>


<ul id="hoge">
<li><img src="testcookie0.png">testcookie0.png</li>
<li><img src="cookie00.png">cookie00.png</li>
<li><img src="Cookie0.png">Cookie0.png</li>
<li><img src="cookie0.png">cookie0.png</li>
<li><img src="cookie0.PNG">cookie0.PNG</li>
<li><img src="cookie0.Jpg">cookie0.Jpg</li>
</ul>