前提・実現したいこと
JavaScriptで要素の移動を試みておりまして、HTMLにあるinput要素を全て別の場所「.result」に移動したいです。
途中まで作ったものがあるので、よろしければご覧下さい。
https://jsfiddle.net/315nyuad/
発生している問題・エラーメッセージ
取得した要素の結合時に[object]となってしまい解決策がわかりません。
該当のソースコード
html
1<p>「.result」の中身をコメントアウトしてあるようにしたいです。</p> 2 3<div class="target"> 4 <div class="text1"> 5 <input class="kmnty" type="text"> 6 </div> 7 <div class="text2"> 8 <input class="okafs" type="text"> 9 </div> 10 <div class="text3"> 11 <input class="jeagn" type="text"> 12 </div> 13 <div class="text4"> 14 <input class="ewhnn" type="text"> 15 </div> 16 <div class="text5"> 17 <input class="yghwp" type="text"> 18 </div> 19 <div class="number1"> 20 <input class="uoirw" type="number"> 21 </div> 22 <div class="number2"> 23 <input class="pldxd" type="number"> 24 </div> 25 <div class="number3"> 26 <input class="wgoui" type="number"> 27 </div> 28 <div class="number4"> 29 <input class="adtgh" type="number"> 30 </div> 31 <div class="number5"> 32 <input class="aqwuy" type="number"> 33 </div> 34</div> 35 36<div class="result"> 37<!-- <div class="move1"> --> 38<!-- <input class="kmnty" type="text"> --> 39<!-- <input class="uoirw" type="number"> --> 40<!-- </div> --> 41<!-- <div class="move2"> --> 42<!-- <input class="okafs" type="text"> --> 43<!-- <input class="pldxd" type="number"> --> 44<!-- </div> --> 45</div>
試したこと
JavaScript初心者で、下記のようなコードで試してみましたが、上述のとおり[object]となってしまいます。
JacaScript
1$(function(){ 2 3 // ➀:inputの取得(text1とnumber1) 4 var text1 = $('.text1 input'); 5 var number1 = $('.number1 input'); 6 var item1 = '<div class="move1">'+text1+number1+'</div>'; 7 8 // ➁:inputの取得(text2とnumber2) 9 var text2 = $('.text2 input'); 10 var number2 = $('.number2 input'); 11 var item2 = '<div class="move2">'+text2+number2+'</div>'; 12 13 // ➂➃➄:同様にinputをitem3からitem5に取得したい 14 15 // ➅:取得した要素を全て移動 16 var resultitem = $.extend(item1, item2); //item1からitem5までを結合 17 $('.result').html(resultitem); //結合したものを移動 18 19}); 20
補足情報(FW/ツールのバージョンなど)
jQuery1.12.4を使用しています。
尚、現状のHTMLに対してクラス付与などあらゆる変更は不可とします。
宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/24 02:22
2018/10/24 02:23
2018/10/24 02:25