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

Question

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を指定することで、実装できる仕様の様です。

<div id="list_p">
  <div id="parent_0" class="list_parent sample">
    <div class="handle_box handler"><i class="fas fa-arrows-alt" style="font-size:16px;"></i></div>
    <div class="active_box_wrapper">
      <div class="active_box_top">
        <div class="parent_wrapper">
          <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="">
          <div class="child_num_input common_num_input delete_p display_center"><i class="fas fa-minus"></i></div>
        </div>
      </div>
      <div class="active_box_bottom">
        <div id="list_c_0" class="child_wrapper">
          <div class="list_child">
            <div class="child_num_input common_num_input display_center handler"><i class="fas fa-arrows-alt"></i></div>
            <div class="child_num_input common_num_input watch display_center"><i class="fas fa-search"></i></div>
            <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="">
            <div class="child_num_input common_num_input delete display_center"><i class="fas fa-minus"></i></div>
          </div>
          <div class="list_child">
            <div class="child_num_input common_num_input display_center handler"><i class="fas fa-arrows-alt"></i></div>
            <div class="child_num_input common_num_input watch display_center"><i class="fas fa-search"></i></div>
            <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="">
            <div class="child_num_input common_num_input delete display_center"><i class="fas fa-minus"></i></div>
          </div>
          <div class="list_child">
            <div class="common_num_input display_center child_add"><i class="fas fa-plus"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<button>push</button>
<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>

Sortable.create(list_p, {
  animation: 100,
  handle: '.handler'
});

Sortable.create(list_c_0, {
  animation: 100,
  handle: '.handler',
  group: 1
});

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

Sortable.create(list_p, {
  animation: 100,
  onEnd: function(evt){
    var children_elm_from = $(evt.from).children();
    children_elm_from.each(function(index,elm){
      $(elm).attr('id','parent_'+index);
      $(elm).find('.parent_num').val((index+1)+'.')
    });
  }
});

Sortable.create(list_c_0, {
  animation: 100,
  group: 1,
  onEnd: function(evt){
    var children_elm_from = $(evt.from).children();
    var children_elm_to = $(evt.to).children();
    children_elm_to.each(function(index,elm){
      $(elm).find(".child_num").val("("+(index+1)+")")
    });
    children_elm_from.each(function(index,elm){
      $(elm).find(".child_num").val("("+(index+1)+")")
    });
  }
});
//ここから動的に要素を追加するコード
$('button').on('click',function(){
var parent_len = $('#list_p').children().length;
    var add_elem = '<div id="parent_'+parent_len+'" class="list_parent sample">\
    <div class="handle_box handler"><i class="fas fa-arrows-alt" style="font-size:16px;"></i></div>\
    <div class="active_box_wrapper">\
      <div class="active_box_top">\
        <div class="parent_wrapper">\
          <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="">\
          <div class="child_num_input common_num_input delete_p display_center"><i class="fas fa-minus"></i></div>\
        </div>\
      </div>\
      <div class="active_box_bottom">\
        <div id="list_c_'+parent_len+'" class="child_wrapper">\
          <div class="list_child">\
            <div class="child_num_input common_num_input display_center handler"><i class="fas fa-arrows-alt"></i></div>\
            <div class="child_num_input common_num_input watch display_center"><i class="fas fa-search"></i></div>\
            <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="">\
            <div class="child_num_input common_num_input delete display_center"><i class="fas fa-minus"></i></div>\
          </div>\
          <div class="list_child">\
            <div class="child_num_input common_num_input display_center handler"><i class="fas fa-arrows-alt"></i></div>\
            <div class="child_num_input common_num_input watch display_center"><i class="fas fa-search"></i></div>\
            <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="">\
            <div class="child_num_input common_num_input delete display_center"><i class="fas fa-minus"></i></div>\
          </div>\
          <div class="list_child">\
            <div class="common_num_input display_center child_add"><i class="fas fa-plus"></i></div>\
          </div>\
        </div>\
      </div>\
    </div>\
    </div>';
    $('#list_p').append(add_elem);
    
    var target = $('#list_c_'+parent_len)
    Sortable.create(target, {
  animation: 100,
  group: 1,
  onEnd: function(evt){
    var children_elm_from = $(evt.from).children();
    var children_elm_to = $(evt.to).children();
    children_elm_to.each(function(index,elm){
      $(elm).find(".child_num").val("("+(index+1)+")")
    });
    children_elm_from.each(function(index,elm){
      $(elm).find(".child_num").val("("+(index+1)+")")
    });
  }
});
    
})

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

Comments

[maisumakun]

> sortable.jsというJqueryのライブラリを利用しております。

リンクは正しいですか？（jQuery UIのsortasbleになっています）

[pegy]

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

[maisumakun]

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

両者は全く別物です。

Answer 1

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

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

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

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

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

Comments

[pegy]

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

Answer 2

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

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

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

Comments

[pegy]

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