テーブル内の特定の範囲にjqueryイベントを適用します。

Question

リピーターにテーブルがあります。データはテーブルに入力され、ロードされるデータのタイプに応じて各行にクラスが割り当てられます。例：

<table id="detail-table"> 
     <tr class="typeA"> 
      <td>Value</td> 
     </tr> 
     <tr class="typeB"> 
      <td>Value</td> 
     </tr> 
     <tr class="typeC"> 
      <td>Value</td> 
     </tr> 
     <tr class="typeB"> 
      <td>Value</td> 
     </tr> 
     <tr class="typeA"> 
      <td>Value</td> 
     </tr> 
</table> 

表は折り畳まれた表です。 typeAはヘッダー、typeBはtypeAの子、typeCはtypeBの子です。表の例では、typeAには2つの直接の子があり、最初の子にも子があります。

typeAをクリックすると、2つのtypeB行が表示され、typeBに子がある場合は、typeC行が表示されるように展開されます。私はクリックでこれを行うイベントハンドラを持っています。

特定の値を持つアイテムに対して完全な詳細展開（typeAからtypeC）を適用する必要があります。 typeAのセルの値がクエリ文字列から受け取った値と等しい場合、親とその親のすべての子に対してexpandイベントをトリガーする必要があります。私はすでにこれを行ういくつかのコードを持っています。しかし、私はそれがちょっとしたハックだと感じています。誰かに何か提案があるかどうか疑問に思っていましたか？ここまで私がこれまで持っていたことがあります。

$(function() { 
     var tableRows = $('#detail-table').find("tr:gt(0)"); 
     $(tableRows).each(function(i, val) { 
      //ExpandValue is a value in my C# page. 
      if ($.trim(val.cells[0].innerText) == '<%= ExpandValue %>'){ 
       expandRows(i); 
      } 
     } 

     function expandRows(startIndex) { 
      // Expand the first row, the typeA class 
      // row that matches the value 
      $(tableRows[startIndex]).trigger('expand'); 
      startIndex += 1; 
      while($(tableRows[startIndex]).attr("class") != "typeA"){ 
       $(tableRows[startIndex]).trigger('expand'); 
       startIndex++; 
      } 
     } 
}); 

これは、テーブルのすべての行を検索します。次に、テーブル行の配列をループします。条件は、各行の最初のセルのinnerTextをチェックします。セルのinnerTextがExpandValueと一致する場合、ターゲット行が見つかりました。この行のインデックスをexpandRows関数に送信します。 expandRows関数では、startIndexの行を展開します。これはExpandValueと一致するtypeAクラスの行です。次にstartIndexを1だけインクリメントして次の行をポイントします。 whileループは各行のクラスをチェックします。次のtypeA行がヒットするまで、各行のexpandイベントをトリガーします。これは正しく動作し、各行を正しく展開します。しかし、もう一度、私はjqueryの新人です、そして、私はこれをより良い方法で達成するための多分方法があると感じます。何か案は？

Answer 1

あなたがスピードアップすることができ、あなたのセレクタとループをあなたのコードの先頭に：ここで

//instead of using a pseudo-selector, we can use the `slice()` function to get all but the first element returned 
var $tableRows = $('#detail-table').find("tr").slice(1); 

//this `for` loop will perform a lot faster than the `.each()` loop 
for (var i = 0, len = $tableRows.length; i < len; i++) { 
    if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') { 
     expandRows(i); 
    } 
} 

は、適切にフォーマットforループはjQueryの.each()を使用するよりもどのくらい速いのデモンストレーションです：http://jsperf.com/jquery-each-vs-for-loops/2

ここ

屋のためのいくつかのドキュメントです：

• .slice()：http://api.jquery.com/slice
• .eq()：http://api.jquery.com/eq
• .text()：http://api.jquery.com/text

また、あなたはそれがすでに開始されてからjQueryオブジェクトであるため、必要ありませんjQueryのでは、あなたのtableRows変数を、ラップ保ちます。

$(function() { 
     var $tableRows = $('#detail-table').find("tr").slice(1); 
     for (var i = 0, len = $tableRows.length; i < len; i++) { 
      if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') { 
       expandRows(i); 
      } 
     } 

     function expandRows(startIndex) { 
      // Expand the first row, the typeA class 
      // row that matches the value 
      $tableRows.eq(startIndex).trigger('expand'); 
      startIndex++; 
      while($tableRows.eq(startIndex).attr("class") != "typeA"){ 
       $tableRows.eq(startIndex).trigger('expand'); 
       startIndex++; 
      } 
     } 
}); 

私は、これはすでにあなたが欲しいものをやっているかはわからないけどforループを通る最初の反復は、その後expandRows()機能をトリガーする場合ので、あなたのexpandRows機能であなたはおそらく何かを行う前に1によってstartIndexをインクリメントする必要があり一番上の行を対象とするゼロのインデックスが渡されます（最初はセレクタから除外されます）。

Answer 2

$(function(){ 
    var $list = $('#detail-table tr.typeA:gt(0) > td:eq(0):contains("<%= ExpandValue %>")'); 
    for (var i = 0, len = $list.length; i < len; i++) 
    { 
    var $nextrows = $list[i].nextAll("tr"); 
    for (var x = 0, ilen = $nextrows.length; x < ilen; x++) 
    { 
     if ($nextrows[x].hasClass("typeA")) break; 
     $nextrows[x].trigger('expand'); 
    } 
    } 
});