動的にhtml順序リストを使用する

Question

GUIで順序付きリストを持つグリッドを作成するためにJqueryとhtmlを使用しています。ユーザは、グリッドセルのそれぞれのHTMLコンテンツを動的に編集することができます。 liの各要素は、ユーザーが編集できることを、それに関連付けられた.htmlを持っている場合はどのように私は.htmlの現在の値を取得するためにliのすべての要素を反復処理することができ、

1. ：私は2つの質問がありますか？各要素に個別に名前を付ける必要はありません。

2. グリッドをユーザーがカスタマイズできるようにしたいと考えています。私。ユーザーが2 rowsと2 colsを入力すると、グリッドが2x2で表示されます。 GUIにhtmlがどのように表示されるかを動的に編集するにはどうすればよいですか？ユーザーが10x10グリッドを必要とする場合は、実際に100 li要素を作成する必要がありますか、それとも良い方法ですか？

ここに注文リストのコードを示します。今は12の細胞があります。ありがとう！

<ol id="selectable"> 
    <li class="ui-state-default">1</li> 
    <li class="ui-state-default">2</li> 
    <li class="ui-state-default">3</li> 
    <li class="ui-state-default">4</li> 
    <li class="ui-state-default">5</li> 
    <li class="ui-state-default">6</li> 
    <li class="ui-state-default">7</li> 
    <li class="ui-state-default">8</li> 
    <li class="ui-state-default">9</li> 
    <li class="ui-state-default">10</li> 
    <li class="ui-state-default">11</li> 
    <li class="ui-state-default">12</li> 
</ol> 

Answer 1

1. あなたは要素のリストからすべてのinnerHTMLを取得するために.map()を使用することができます。次のコードはinnerHTMLの各liのリストを与え、コンマで結合します。

   $('#selectable li').map(function(v) { return $(this).html() }).get().join(', ');

2. 私はjQueryのmanipulation methodsは、要素を削除/挿入のお手伝いをすることをかなり確信しています。グリッド内のセル数は実際にあなたのプログラムまでです。 1000個の細胞を挿入することさえできます。何故なの？