変数名を動的に変更する方法

sortable.jsというJqueryのライブラリを利用しております。
例えば以下の様にネスト化した要素群でもid="list_p"やid="list_c_0"としてそれぞれにidを指定してあげて、
Sortable.create(list_p, {、Sortable.create(list_c_0, {としてcreate()してあげることでこれを実装できます。

ライブラリではcerate()メソッドの第一引数に変数としてlist_pやlist_c_0を指定することで、実装できる仕様の様です。

html
1<div id="list_p">
2  <div id="parent_0" class="list_parent sample">
3    <div class="handle_box handler"><i class="fas fa-arrows-alt" style="font-size:16px;"></i></div>
4    <div class="active_box_wrapper">
5      <div class="active_box_top">
6        <div class="parent_wrapper">
7          <input class="parent_num_input common_num_input parent_num" type="text" value="1." disabled><input class="parent_input common_input" type="text" name="" value="">
8          <div class="child_num_input common_num_input delete_p display_center"><i class="fas fa-minus"></i></div>
9        </div>
10      </div>
11      <div class="active_box_bottom">
12        <div id="list_c_0" class="child_wrapper">
13          <div class="list_child">
14            <div class="child_num_input common_num_input display_center handler"><i class="fas fa-arrows-alt"></i></div>
15            <div class="child_num_input common_num_input watch display_center"><i class="fas fa-search"></i></div>
16            <input class="child_num_input common_num_input child_num" type="text" value="(1)" disabled><input class="child_input common_input" type="text" name="" value="">
17            <div class="child_num_input common_num_input delete display_center"><i class="fas fa-minus"></i></div>
18          </div>
19          <div class="list_child">
20            <div class="child_num_input common_num_input display_center handler"><i class="fas fa-arrows-alt"></i></div>
21            <div class="child_num_input common_num_input watch display_center"><i class="fas fa-search"></i></div>
22            <input class="child_num_input common_num_input child_num" type="text" value="(2)" disabled><input class="child_input common_input" type="text" name="" value="">
23            <div class="child_num_input common_num_input delete display_center"><i class="fas fa-minus"></i></div>
24          </div>
25          <div class="list_child">
26            <div class="common_num_input display_center child_add"><i class="fas fa-plus"></i></div>
27          </div>
28        </div>
29      </div>
30    </div>
31  </div>
32</div>
33<button>push</button>
34<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js" integrity="sha512-zYXldzJsDrNKV+odAwFYiDXV2Cy37cwizT+NkuiPGsa9X1dOz04eHvUWVuxaJ299GvcJT31ug2zO4itXBjFx4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
35

javascript
1Sortable.create(list_p, {
2  animation: 100,
3  handle: '.handler'
4});
5
6Sortable.create(list_c_0, {
7  animation: 100,
8  handle: '.handler',
9  group: 1
10});

ここで、動的にlist_c_1をcreate()してあげたいのですが、方法がわかりません。

javascript
1Sortable.create(list_p, {
2  animation: 100,
3  onEnd: function(evt){
4    var children_elm_from = $(evt.from).children();
5    children_elm_from.each(function(index,elm){
6      $(elm).attr('id','parent_'+index);
7      $(elm).find('.parent_num').val((index+1)+'.')
8    });
9  }
10});
11
12Sortable.create(list_c_0, {
13  animation: 100,
14  group: 1,
15  onEnd: function(evt){
16    var children_elm_from = $(evt.from).children();
17    var children_elm_to = $(evt.to).children();
18    children_elm_to.each(function(index,elm){
19      $(elm).find(".child_num").val("("+(index+1)+")")
20    });
21    children_elm_from.each(function(index,elm){
22      $(elm).find(".child_num").val("("+(index+1)+")")
23    });
24  }
25});
26//ここから動的に要素を追加するコード
27$('button').on('click',function(){
28var parent_len = $('#list_p').children().length;
29    var add_elem = '<div id="parent_'+parent_len+'" class="list_parent sample">\
30    <div class="handle_box handler"><i class="fas fa-arrows-alt" style="font-size:16px;"></i></div>\
31    <div class="active_box_wrapper">\
32      <div class="active_box_top">\
33        <div class="parent_wrapper">\
34          <input class="parent_num_input common_num_input parent_num" type="text" value="'+(parent_len+1)+'." disabled><input class="parent_input common_input" type="text" name="" value="">\
35          <div class="child_num_input common_num_input delete_p display_center"><i class="fas fa-minus"></i></div>\
36        </div>\
37      </div>\
38      <div class="active_box_bottom">\
39        <div id="list_c_'+parent_len+'" class="child_wrapper">\
40          <div class="list_child">\
41            <div class="child_num_input common_num_input display_center handler"><i class="fas fa-arrows-alt"></i></div>\
42            <div class="child_num_input common_num_input watch display_center"><i class="fas fa-search"></i></div>\
43            <input class="child_num_input common_num_input child_num" type="text" value="(1)" disabled><input class="child_input common_input" type="text" name="" value="">\
44            <div class="child_num_input common_num_input delete display_center"><i class="fas fa-minus"></i></div>\
45          </div>\
46          <div class="list_child">\
47            <div class="child_num_input common_num_input display_center handler"><i class="fas fa-arrows-alt"></i></div>\
48            <div class="child_num_input common_num_input watch display_center"><i class="fas fa-search"></i></div>\
49            <input class="child_num_input common_num_input child_num" type="text" value="(2)" disabled><input class="child_input common_input" type="text" name="" value="">\
50            <div class="child_num_input common_num_input delete display_center"><i class="fas fa-minus"></i></div>\
51          </div>\
52          <div class="list_child">\
53            <div class="common_num_input display_center child_add"><i class="fas fa-plus"></i></div>\
54          </div>\
55        </div>\
56      </div>\
57    </div>\
58    </div>';
59    $('#list_p').append(add_elem);
60    
61    var target = $('#list_c_'+parent_len)
62    Sortable.create(target, {
63  animation: 100,
64  group: 1,
65  onEnd: function(evt){
66    var children_elm_from = $(evt.from).children();
67    var children_elm_to = $(evt.to).children();
68    children_elm_to.each(function(index,elm){
69      $(elm).find(".child_num").val("("+(index+1)+")")
70    });
71    children_elm_from.each(function(index,elm){
72      $(elm).find(".child_num").val("("+(index+1)+")")
73    });
74  }
75});
76    
77})

の様にしてもUncaught Sortable: el must be an HTMLElement, not [object Object]といったエラーで実装することができません。動くsample
おそらく変数名を動的に変更する問題であると解釈しているのですが、アドバイスをいただけるとさいわいです。よろしくお願い申し上げます。

maisumakun

2021/08/30 04:01

> sortable.jsというJqueryのライブラリを利用しております。リンクは正しいですか？（jQuery UIのsortasbleになっています）

pegy

2021/08/30 05:32

ご回答ありがとうございます。本当に申し訳ないのですが、用語を適切に理解できていないのかもしれません。ライブラリとUIとは異なるものなのでしょうか？確かに以下の様なものがそれぞれあって、 https://sortablejs.github.io/Sortable/ https://js.studio-kingdom.com/jqueryui/interactions/sortable 基本的には書き方の違いなだけであって、同じライブラリと思ってしまっていました。。根本的な認識があればご指摘願えれば幸いです。

maisumakun

2021/08/30 05:34

> 基本的には書き方の違いなだけであって、同じライブラリと思ってしまっていました。。両者は全く別物です。

行動規範の内容に同意します

回答2件

エラー文を正しく読み取りましょう。
「createには本来HTMLElementを渡さなければいけないのに[object Object]が渡されてますよ」と言われています。
では次に何を疑うのか？

js
1var target = $('#list_c_'+parent_len)
2Sortable.create(target, {

でtargetがHTMLElementではないと予想を立てなければなりません。
次に$()で取得できるのがどういう形式のものかを調べましょう。
調べればわかりますがHTMLElementではなく配列形式で取得されます。
なのでそこからHTMLElementを抽出して渡してあげればよいかと。

おそらく変数名を動的に変更する問題であると解釈しているのですが

どうしてこの解釈になりましたか？
自分としても曖昧だった、不安だった部分が悪いんじゃないかと先入観を持ってしまうと解決から遠ざかります。
しっかりエラー文を読むことをおすすめします。

投稿2021/08/30 04:09

p19ljk

総合スコア146

pegy

2021/08/30 05:38

コメントありがとうございます。 $()についてですが、関数が返すのは DOM 要素の配列を含む特別な JavaScript オブジェクト（jQuery オブジェクト）と理解しております。この点では、形式としては確かにオブジェクト型を返してしまっているので、HTMLElementではないという点、エラーの読み方を理解することができました。ここから、HTMLElementを抽出すれば良いのですね。下記にmaisumakun様もご指摘いただいていますが、そもそもJQueryラッパーで取得して、HTMLElementを抜き出さずとも、直接getElementById()でHTMLElementを動的に取得する方が合理的であると思いました。おっしゃる通り、先入観で誤解して迷子になってしまいました、気をつけて取り組んでまいります。

行動規範の内容に同意します

ベストアンサー

そもそも論として、宣言せずにlist_pのような「idを変数として回収する」のは古いやり方です。getElementByIdを使いましょう。

javascript
1Sortable.create(document.getElementById('list_p'), // 後略

これなら、動的に変化するものにも、文字列を差し替えるだけで何ら問題なく対応できます。

投稿2021/08/30 04:08

maisumakun

総合スコア145932

pegy

2021/08/30 05:39

コメントありがとうございます。修正、加筆の箇所にsortableに関する、UIとライブラリの違いは今もなお、調べておりますが、おっしゃる通り、getElementById()でHTMLElementを動的に取得することで、実装することができました。お力添え、ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.37%

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

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

質問する

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

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

変数名を動的に変更する方法

関連した質問