質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1370閲覧

複数並び替えした際に、並び替えたtableタグ内のselectが取得できるようにしたい。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/04/02 09:21

###前提・実現したいこと
selectableとsortableを使って、tableタグの並び替えをできるようにしたのですが、sortable内でcloneを使っているためにselect内のoptionが取得できていません。
原因はわかっているのですが、ソースコードの書き方がわかっておりません。
ご教授いただけないでしょうか?
宜しくお願い致します。

###該当のソースコード

html

1<div id="imageEdit" class="ui-selectable ui-sortable"> 2 <table> 3 <tbody> 4 <tr id="image-1" class=" sort-handle"> 5 <th style="width: 30px; cursor: move;"> 6 1 7 </th> 8 <td> 9 <p> 10 <select name="imageTypeCode1" id="imageTypeCode1" class="imageType"> 11 <option value="">カテゴリを選択</option> 12 <option value="1"></option> 13 <option value="2"></option> 14 <option value="15">3う</option> 15 <option value="3"></option> 16 <option value="4"></option> 17 <option value="5"></option> 18 <option value="6"></option> 19 <option value="7"></option> 20 </select></p> 21 </td> 22 </tr> 23 </tbody> 24 </table> 25 <table> 26 <tbody> 27 <tr id="image-2" class=" sort-handle"> 28 <th style="width: 30px; cursor: move;"> 29 2 30 </th> 31 <td> 32 <p> 33 <select name="imageTypeCode2" id="imageTypeCode2" class="imageType"> 34 <option value="">カテゴリを選択</option> 35 <option value="1"></option> 36 <option value="2"></option> 37 <option value="15">3う</option> 38 <option value="3"></option> 39 <option value="4"></option> 40 <option value="5"></option> 41 <option value="6"></option> 42 <option value="7"></option> 43 </select></p> 44 </td> 45 </tr> 46 </tbody> 47 </table> 48 <table> 49 <tbody> 50 <tr id="image-3" class=" sort-handle"> 51 <th style="width: 30px; cursor: move;"> 52 3 53 </th> 54 <td> 55 <p> 56 <select name="imageTypeCode3" id="imageTypeCode3" class="imageType"> 57 <option value="">カテゴリを選択</option> 58 <option value="1"></option> 59 <option value="2"></option> 60 <option value="15">3う</option> 61 <option value="3"></option> 62 <option value="4"></option> 63 <option value="5"></option> 64 <option value="6"></option> 65 <option value="7"></option> 66 </select></p> 67 </td> 68 </tr> 69 </tbody> 70 </table> 71 <table> 72 <tbody> 73 <tr id="image-4" class=" sort-handle"> 74 <th style="width: 30px; cursor: move;"> 75 4 76 </th> 77 <td> 78 <p> 79 <select name="imageTypeCode4" id="imageTypeCode4" class="imageType"> 80 <option value="">カテゴリを選択</option> 81 <option value="1"></option> 82 <option value="2"></option> 83 <option value="15">3う</option> 84 <option value="3"></option> 85 <option value="4"></option> 86 <option value="5"></option> 87 <option value="6"></option> 88 <option value="7"></option> 89 </select></p> 90 </td> 91 </tr> 92 </tbody> 93 </table> 94 <table> 95 <tbody> 96 <tr id="image-5" class=" sort-handle"> 97 <th style="width: 30px; cursor: move;"> 98 5 99 </th> 100 <td> 101 <p> 102 <select name="imageTypeCode5" id="imageTypeCode5" class="imageType"> 103 <option value="">カテゴリを選択</option> 104 <option value="1"></option> 105 <option value="2"></option> 106 <option value="15">3う</option> 107 <option value="3"></option> 108 <option value="4"></option> 109 <option value="5"></option> 110 <option value="6"></option> 111 <option value="7"></option> 112 </select></p> 113 </td> 114 </tr> 115 </tbody> 116 </table> 117 </div>

jquery

$(function() { $('#imageEdit').selectable({ cancel: 'td, .ui-selected', filter: '> table' }).sortable({ items: '> table', handle: '.sort-handle, .ui-selected', helper: function(e, item) { if ( !item.hasClass('ui-selected') ) { item.parent().children('.ui-selected').removeClass('ui-selected'); item.addClass('ui-selected'); } var selected = item.parent().children('.ui-selected').clone(); ph = item.outerHeight() * selected.length; item.data('multidrag', selected).siblings('.ui-selected').remove(); return $('<table/>').append(selected); }, start: function (e, ui) { ui.placeholder.css({'height': ph}); }, stop: function(e, ui) { var selected = ui.item.data('multidrag', selected); ui.item.after(selected); ui.item.remove(); } }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Deep Copy したいという事であれば、clone()の代わりにhtml()を使ってみてはいかがでしょうか。
jquery.html()

投稿2017/04/04 10:23

gittib_gittib

総合スコア102

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/04/05 11:07 編集

ご回答ありがとうございます。 ただ、cloneからhtmlに変更しただけではダメみたいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問