JQueryのtbodyクローンの参照がうまくいかない

Question

$(function(){
  $('#add_subject').on('click',function(){
    var tbody=$(this).parents('table').first().find('tbody').first();
    var clone_tr=tbody.find('tr').first().clone();

    var max_data_id = 0;
    tbody.find('button').each(function(){
      var id=parseInt($(this).data('id'));
      if(id!==null && id>max_data_id) max_data_id=id;
    });
    tbody.find('input').each(function(){
      var num=parseInt($(this).attr('name').match(/\[([0-9]+)\]/)[1]);
      if(num!==null && num>max_data_id) max_data_id=num;
    });
    tbody.find('textarea').each(function(){
      var num=parseInt($(this).attr('name').match(/\[([0-9]+)\]/)[1]);
      if(num!==null && num>max_data_id) max_data_id=num;
    });

    tbody.append(clone_tr);
    console.log(clone_tr.find('div [id="minutesItemList[0].subject"]').val());
    clone_tr.find('div [id="minutesItemList[0].subject').attr('id','minutesItemList[' + max_data_id + '].subject');
    clone_tr.find('div').attr('id','minutesItemList[' + max_data_id + '].body');
    clone_tr.find('p').attr('id','subject'+max_data_id+'.error');
    clone_tr.find('p').attr('id','body'+max_data_id+'.error');
    
    clone_tr.find('input').attr('name','minutesItemList['+max_data_id+'].subject').val("");
    clone_tr.find('input').attr('id','minutesItemList'+max_data_id+'.subject');
    clone_tr.find('textarea').attr('name','minutesItemList['+max_data_id+'].body').text("");
    clone_tr.find('textarea').attr('id','minutesItemList'+max_data_id+'.body');
    clone_tr.find('button').attr('data-id',max_data_id+1);
  });
});

tbodyの最初のtrタグのクローンのidやname要素を参照したいのですが、うまくいきません。

console.log(clone_tr.find('div [id="minutesItemList[0].subject"]').val());

のようにtbodyの最初のtrタグのクローンのidを参照しようとしたのですが、undefined(定義されていない)エラーがでてしまい参照できません。typeしか参照できないような仕様になっているのでしょうか？どうしたら参照できるか、わかる方教えてください。
以上、よろしくお願い致します。

Answer 1

jQueryのセレクタで、"["、"]"、"."は"\"でエスケープする必要があります。
また、セレクタにスペースを入れると子孫が対象となるので、idを持つdivを取得したい場合はスペースは不要です。

clone_tr.find('div[id="minutesItemList\\[0\\]\\.subject"]')

Comments

[isacRu]

解決しました。ありがとうございます！
エスケープしないといけないんですね。非常に勉強になりました。

Answer 2

clone_tr.find('div [id="minutesItemList[0].subject"]')

と書くと、clone_tr内の<div>内でid="minutesItemList[0].subject"（書いたそのままの値）を探すという意味になります。div自体のidを対象に検索をかけたいなら、div[id=...]のようにスペースなしにする必要があります（自分自身も間違えていました、すみません）。

あと、<div>はvalue属性を持ちませんので、.val()は（仮に正しくdivを選べていても）undefinedにしかなりません。

Comments

[isacRu]

そのtbodyには<div id="minutesItemList[0].subject" class="form-group">とあるので、間違いないと思います。

[isacRu]

また、clone_tr.find('#minutesItemList[0].subject')と書いてもうまくいきませんでした。