jQuery テキストを取得しそれをid名にしたい

質問

ブログをサイトに投稿する際
jQueryを使って以下のように実現するにはどういったコードを書けばいいでしょうか？

【ブログ投稿前】
<div id="inum">
<span class="num">111</span>
</div>

↓

【ブログ投稿後】
<div id="inum_111">
<span class="num">111</span>
</div>

回答No.2

4017B · ベストアンサー

あ～やっぱり…とりあえず元HTMLが、

<div id="inum"><span class="num">1</span></div>
<div id="inum"><span class="num">2</span></div>
　　：
<div id="inum"><span class="num">9</span></div>

～上記のようになっていると言う前提で、

<script>
var my_array = $('div#inum span.num').text();
for ( var i=0; i<my_array.length; i++ ) {
$('div#inum').eq(0).attr( 'id', my_array[i] );
/* もしくは...
$('div#inum').eq(0).attr( 'id', 'inum_'+my_array[i] );
*/
}
</script>

こんな感じで通ると思うけど、また後出しジャンケンで「実は…」と言われてももう知らん(笑)。

P.S.
そもそも同一ページ内に同じ名前のIDが存在する事自体、HTMLとしておかしいので、早急にサイト全体のあり方を考え直すべき事案。基本的にjavascriptもjQueryも、同一ページ内には同じ名前のIDは常に1個単独でしか存在しない前提で設計されてるので、正しいコードを教えても元HTMLに重大な欠陥が内包されたままでは如何ともし難い…。

お礼

２度目に提示してくれたコードは問題がありました

【結果：例】
<div id="1">
<span class="num">1</span>
</div>

<div id="2">
<span class="num">24</span>
</div>

<div id="4">
<span class="num">53</span>
</div>

配列内には一文字ずつ収納してしまうのが原因のようです
どうしようかとネットで調べまわってると
mapというメソッドを見つけました
なんとなく直感で例に出されてるコードを組み込んでみると
偶然うまくいきました
結果がうまくいったコードは以下です

<script>
$(function(){
var my_array = $('div#inum span.num').map(function(){
return $(this).text();
});
for ( var i=0; i<my_array.length; i++ ) {
$('div#res').eq(0).attr( 'id', 'res_'+my_array[i] );
}
});
</script>

これが正しいのかはわかりませんが
とりあえずこれでやってみようかと思います。
初心者のわたしには大変参考になりました
ありがとうございました。

回答No.1

4017B

こんな感じで。

var new_id = $('span.num').text();
$('div#inum').attr( 'id', new_id );

P.S.
同ページ内に <span class="num"> が複数存在すると変になるので注意。

補足

ありがとうございます
テキストをid名にすることができました
しかし私が実現したいのとは違ったので
もう一度質問したいと思います。

結果は以下の通りになりました
目的の結果に導くにはコードはどうすればいいでしょうか
（ライブドアブログ、追記内にて投稿する部分になります）

【結果】

<div id="156">
<span class="num">1</span>
</div>

<div id="156">
<span class="num">5</span>
</div>

<div id="156">
<span class="num">6</span>
</div>

↓

【目的の結果】

<div id="1">
<span class="num">1</span>
</div>

<div id="5">
<span class="num">5</span>
</div>

<div id="6">
<span class="num">6</span>
</div>