[sortable.js](https://api.jqueryui.com/sortable/)という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

``` ```javascript Sortable.create(list_p, { animation: 100, handle: '.handler' }); Sortable.create(list_c_0, { animation: 100, handle: '.handler', group: 1 }); ``` ここで、動的に`list_c_1`をcreate()してあげたいのですが、方法がわかりません。 ```javascript 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 = '

\ \

'; $('#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](https://jsfiddle.net/vxgrf45k/2/) おそらく変数名を動的に変更する問題であると解釈しているのですが、アドバイスをいただけるとさいわいです。よろしくお願い申し上げます。

	@@ -1 +1 @@
1	- 変数名を動的に変更する
1	+ 変数名を動的に変更する方法

質問編集履歴