前提
ボタンクリックで指定クラスの要素を.prepend
するというだけの機能を作っています。
実現したいこと
クリックする限り、.prepend
し続けたいです。
発生している問題
1回しか.prepend
されません。
該当のソースコード
ボタンクリックで.pepned
するだけの簡易なコードです。
https://jsfiddle.net/Lcea4m9j/
html
1<ul> 2 <li>A</li> 3 <li class="target">B</li> 4 <li>C</li> 5</ul> 6 7<input type="text" value="3"> 8<button>Bをリストの上にn件追加</button>
JavaScript
1$('button').click(function(){ 2 const n = $('input').val(); 3 for (let i = 1; i < n; i++){ 4 $('ul').prepend( $('.target') ); 5 } 6});
試したこと
コンソールを見ると条件は問題なく通っているように見えます。
つまり「n」の数だけ「追加します」と出力されます。
JavaScript
1$('button').click(function(){ 2 const n = $('input').val(); 3 console.log(n); 4 for (let i = 1; i < n; i++){ 5 console.log('追加します'); 6 $('ul').prepend( $('.target') ); 7 } 8});
1回しかできないので、2回目はクラスが複数あることが原因か?と思い、次のように.eq()
で一つだけ指定してみましたがダメでした。
JavaScript
1$('ul').prepend( $('.target').eq(0) ); // .eq(0) で一つだけ指定してみた
なんとなく.ouerHTML
も書いてみましたがダメでした。
JavaScript
1$('ul').prepend( $('.target').eq(0).outerHTML ); // .ouerHTMLも書いてみた
こんなの全然簡単でしょ、と高を括っていたのですが、どうしてできないのでしょうか?
バージョン
jQuery 3.6.0
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/09/27 07:20