jqueryで特定のコードを書き換える方法を教えてください。

Question

<table class="rnk1item">
<tbody>
<tr>
<th>
<img src="./img/rank1_a.gif">
</th>
<td class="timg"><img src="<% pageDepth %>img/sample.jpg" alt="" /></td>
<td>
<div class="ttitle"><a href="https://example.com/" target="_blank">商品名</a></div>
<div class="tdesc">ここに説明文を入力ここに説明文を入力ここに説明文を入力ここに説明文を入力ここに説明文を入力</div></td>
</tr>
</tbody>
</table>

書き換えしたい箇所↓

<img src="./img/rank○_a.gif">

rank○の部分には1~30が入ります。
上記のコードがあった場合、jqueryで

<div class="rank○"></div>

に書き換えるにはjQeryでどのように記述したらよいでしょうか。
よろしくお願い致します。

試した方法

$(function() {
	$('.rnk1item th').each(function(){
		var txt = $(this).html();
		$(this).html(
			txt.replace('<img src="./img/','<div class="')
		);
	});
});
$(function() {
	$('.rnk1item th').each(function(){
		var txt = $(this).html();
		$(this).html(
			txt.replace('_a.gif">','"></div>')
		);
	});
});

上記の方法でも大丈夫なのですが、もう少し短いと言うか、シンプルな方法はありますでしょうか？

Comments

[m.ts10806]

$(function() {　で別にわけて入れなくてもいいとは思いますが、そういうことじゃないですよね；

[m.ts10806]

thの中にあるというのは全て共通ですか？

[m.ts10806]

そういえば1~30は「確実に上から順番に並んでいる」のでしょうか？

[snof]

#logo { color: #444; } #logo { vertical-align: middle; } ↓ #logo { color: #444; vertical-align: middle; } CSSで言えば上記のようにfunction()をまとめらると言うことでしょうか？thの中にあるというのは全て共通です。

[m.ts10806]

いえ違います。$(function() {　を2回書く必要がないということです。基本的には「ドキュメント（HTML）読み込み後に」という意味しか持っていないので。

[defghi1977]

tbody要素の開始タグに対する終了タグがありません. HTMLの修正をお願いいたします.

[snof]

ありがとうございます。修正しました。

[defghi1977]

（と言った手前, HTML仕様をみた処, tbodyの閉じタグは必須ではないようでした. ああ, 固定概念が崩れてゆく・・・）

Answer 1

$(function() {
    $('.rnk1item th img').each(function(index, element) {
        $(element).replaceWith($('<div></div>').addClass(element.src.replace(/^.*//, '').replace(/_.+$/, '')));
    });
});

Answer 2

かなり強引な方法をとりました。

$(function(){
   $(".rnk1item th").each(function(){
      divNum = $(this).children("img").attr("src").replace(/[^0-9^]/g,""); //数字以外を置換
       $(this).children("img").remove();
      var imgDiv = $("<div></div>",{
					addClass:"rank"+divNum,
				});
       $(this).append(imgDiv);
   });
});

余談：
thを囲うのであればtbodyではなくtheadの方がhtmlとしてはあるべき姿ですね。

Comments

[defghi1977]

thをtbody内のtrに配置して行見出しとすることがあるので, 今回はそのケースでは？
とおもうたら, tbodyタグの整合性が取れてねーし

[m.ts10806]

なるほど、そういうことですね。
いずれにしても30まであるならせめて3つくらいまででも書いてもらいたいところ。
defghi1977さんの指摘通り、tbody閉じられてないところが目立ちます。

[defghi1977]

で, ちょっとHTML仕様を眺めていたら, tbodyの閉じタグは必ずしも必要ないとか, 知らない仕様だらけで思いがけずひっくり返りました. 出直してきます.

[m.ts10806]

いやまあ閉じておいた方が明示してるので「必要ないらしいけどあった方が分かりやすいよね」くらいの理解で留めておいてもよいのでは。
それで言うと閉じタグが必要ないタグってそこそこの数があった気もします。

[miyabi_pudding]

$("<div></div>",{
addClass:"rank"+divNum,
});
こんな書き方あったのか・・・。
jQuery改めて勉強しようかな・・・。

[snof]

回答ありがとうございます。試した所動作しませんでした。ランク３まではこちらになります。
<table class="rnk1item">
<tbody>
<tr>
<th>
<img src="<% pageDepth %>img/rank1_a.gif" />
</th>
<td class="timg"><img src="<% pageDepth %>img/sample.jpg" alt="" /></td>
<td>
<div class="ttitle"><a href="https://example.com/" target="_blank">商品名</a></div>
<div class="tdesc">ここに説明文を入力ここに説明文を入力ここに説明文を入力ここに説明文を入力ここに説明文を入力</div></td>
</tr>
<tr>
<th>
<img src="<% pageDepth %>img/rank2_a.gif" />
</th>
<td class="timg"><img src="<% pageDepth %>img/sample.jpg" alt="" /></td>
<td>
<div class="ttitle"><a href="https://example.com/" target="_blank">商品名</a></div>
<div class="tdesc">ここに説明文を入力ここに説明文を入力ここに説明文を入力ここに説明文を入力ここに説明文を入力</div></td>
</tr>
<tr>
<th>
<img src="<% pageDepth %>img/rank3_a.gif" />
</th>
<td class="timg"><img src="<% pageDepth %>img/sample.jpg" alt="" /></td>
<td>
<div class="ttitle"><a href="https://example.com/" target="_blank">商品名</a></div>
<div class="tdesc">ここに説明文を入力ここに説明文を入力ここに説明文を入力ここに説明文を入力ここに説明文を入力</div></td>
</tr>
</tbody>
</table>

[m.ts10806]

miyabi_takatsukさん
いつもはダラダラ長々と .html()の中にhtmlタグを直に書いてたのですが、
このQiitaでこの書き方見つけてから結構重宝しています。すっきり書けるんですよね。
ただ入れ子の入れ子の・・とする場合はかなり頭を使います。

[snof]

すみません。<img src="<% pageDepth %>img/rank○_a.gif" />は<% pageDepth %>を除いて<img src="./img/rank○_a.gif">です。

[m.ts10806]

snofさん
<% pageDepth %>　が鬼門ですねー。
ここに数字が入ってたらおそらく変な感じになります。

[m.ts10806]

snofさん16:59
それならうまくいきそうに思います。何がどううまくいかなかったんでしょうか？

Answer 3

単純に、一回のループで同時にやってしまえばいいのでは？

$(function() {
  $('.rnk1item th').each(function(){
    var txt = $(this).html();
    $(this).html(
      txt.replace('<img src="./img/','<div class="').replace('_a.gif">','"></div>')
    );
  });
});

あと、正規表現とか使えば、もっとシンプルにできると思いますよ〜
もしくは、src属性をとってきて、数値だけを抽出した後img要素を削除、
divに組み込んで、親要素に追加、とか。

Comments

[m.ts10806]

> img要素を削除

確かにそのほうが無駄なく確実に書き換えられますね。
こっそり修正しておこう・・・。

Answer 4

jQuery(function($) {
  $(".rnk1item th img").each(function() {
    $(this).replaceWith(`<div class=${this.src.match(/rank\d+/)[0]}>`);
  });
});