class名を全て取得し、操作したい

Question

いつもお世話になっております。
実現したいことは下記なのですが、上手くいかず悩んでおります。

＊＊＊

id="#stage"の、liタグ内にあるclass名を全て取得する
例：class="03"、class="12"、class="25"…

<div id="stage">
	<ul id="place_1">
		<li><img src=" card_3.png" class="03"></li>
		<li><img src=" card_2.png" class="12"></li>
		<li><img src=" card_5.png" class="25"></li>
		<li><img src=" card_4.png" class="34"></li>
	</ul>                            
	<ul id="place_2">                
		<li><img src=" card_1.png" class="41"></li>
		<li><img src=" card_4.png" class="54"></li>
		<li><img src=" card_3.png" class="63"></li>
		<li><img src=" card_2.png" class="72"></li>
	</ul>                            
	<ul id="place_3">                
		<li><img src=" card_1.png" class="81"></li>
		<li><img src=" card_1.png" class="91"></li>
		<li><img src=" card_3.png" class="103"></li>
		<li><img src=" card_2.png" class="112"></li>
	</ul>
</div>

↓

1桁目のみにする ※桁数は2桁か3桁しか存在しない
例：3、2、5…

↓

特定の値と一致したclass名のimgタグに、
class="active"を付与する

例：特定の値が2の場合、下記のみに追加 ※特定の値は変数になっている

<li><img src=" card_2.png" class="12 active"></li>
<li><img src=" card_2.png" class="72 active"></li>
<li><img src=" card_2.png" class="112 active"></li>

拙い説明で恐縮ですが、よろしくお願いいたします。

＊＊＊

下記、なんとかしようとした残骸。
これだと1つ目の画像名しか取得できず…。

$('img').each( function(){
			var src = $("#stage ul li img").attr('src'); 
});

Answer 1

class名は命名規則的に数字だけや数字始まりはできません。

その上で

$(function(){
    $('#stage ul li img').each( function(){
                var src = $(this).attr('class'); 
                console.log(src);
    });
});

例えばこんなかんじです。

Answer 2

数字から始まるclass名を指定する事の是非

よく聞く話でその度に説明しているので外部コンテンツにまとめました。
簡単にまとめると仕様上は許されますが、セマンティクス的な意味で避けた方が良いと思います。

• [HTML, CSS, JavaScript] id名/class名に使用できる文字の種類

コード

私ならJavaScriptで扱いやすいようにHTMLを書き換えます。

<div id="stage">
  <ul id="place_1">
    <li><img class="card" src=" card_3.png" data-no="03"></li>
    <li><img class="card" src=" card_2.png" data-no="12"></li>
    <li><img class="card" src=" card_5.png" data-no="25"></li>
    <li><img class="card" src=" card_4.png" data-no="34"></li>
  </ul>
  <ul id="place_2">
    <li><img class="card" src=" card_1.png" data-no="41"></li>
    <li><img class="card" src=" card_4.png" data-no="54"></li>
    <li><img class="card" src=" card_3.png" data-no="63"></li>
    <li><img class="card" src=" card_2.png" data-no="72"></li>
  </ul>
  <ul id="place_3">
    <li><img class="card" src=" card_1.png" data-no="81"></li>
    <li><img class="card" src=" card_1.png" data-no="91"></li>
    <li><img class="card" src=" card_3.png" data-no="103"></li>
    <li><img class="card" src=" card_2.png" data-no="112"></li>
  </ul>
</div>

<script>
'use strict';
jQuery('.card:not(.active)').each(function (i, element) {
  element = jQuery(element);

  if (element.data('no') % 10 === 2) {
    element.addClass('active');
  }
});
</script>

HTMLを書き換えられない制約があるのならページ表示時点でJavaScriptで扱いやすいようにDOMを書き換えます。

Re: abiscoa さん

Answer 3

本当にimgのclassにactiveを追加でよいのでしょうか？
リスト形式であれば通常おやのliに付加したほうが都合良さそうですが

またimgのclassの数字を参照していますが、srcの画像ファイル名とリンクしているなら
こんな感じでもよいかもしれません

<style>
.active{background-Color:red}
</style>
<script>
$(function(){
  var num=2;
  var reg=new RegExp("_"+num+"\.png");
  $('#stage li').filter(function(){return $(this).find('img').attr('src').match(reg);}).addClass('active');
  
});
</script>
<div id="stage">
    <ul id="place_1">
        <li><img src="card_3.png"></li>
        <li><img src="card_2.png"></li>
        <li><img src="card_5.png"></li>
        <li><img src="card_4.png"></li>
    </ul>                        
    <ul id="place_2">            
        <li><img src="card_1.png"></li>
        <li><img src="card_4.png"></li>
        <li><img src="card_3.png"></li>
        <li><img src="card_2.png"></li>
    </ul>                        
    <ul id="place_3">            
        <li><img src="card_1.png"></li>
        <li><img src="card_1.png"></li>
        <li><img src="card_3.png"></li>
        <li><img src="card_2.png"></li>
    </ul>
</div>

Answer 4

each文の中のセレクタが変なとこ見てるのでthisで取れると思います。

$('#stage').find('img').each(function() {
  var src = $(this).attr('class'); 
});