jQueryを使用してテーブルセルクラスとインデックスを一致させる

Question

次のコードは、私のアプリに適用したい理論のデモンストレーションですので、td.flexの代わりにTHISを使用することは関数の2行目には適切ではありません。

また、他の理由で、nth-childの代わりに.indexを使用する必要があります。

全ては、以下の機能が全てTDのフレックスのクラスを持っているテーブルの最初の行のをループ:)

を言いました。これらのそれぞれについて、インデックス値を記録する。次の行は実際のアプリケーションの一部ではありませんが、cellIndex値に一致するインデックス値を持つflexクラスのすべてのtddを見つけるはずです。どのようにこれを動作させるための任意のアイデアですか？

このコードは理論をテストすることを覚えています。なぜ、nth-childを使用していないのですか？

cellIndex = new Array(); 

    $('table tr:first-child td.flex').each(function (i) { 

     cellIndex[i] = $(this).index(); 

     $($('td.flex').index(cellIndex)).css('background-color', '#ff0000'); 

    }); 

私がしなければ：console.log($('td.flex').index(cellIndex));

は、私はちょうど私が私がこれを行う可能性が知っているを確認するために、各ループの-1

を得る：

$(this).css('background-color', '#ff0000'); 

をこれはISいいえ、私が知恵を達成しようとしていることこの機能は実際のアプリケーションでは機能しません。

HTML例：

<table> 
<tr> 
<td class="flex">Flex</td> 
<td>Not Flex</td> 
<td class="flex">Flex</td> 
<td>Not Flex</td> 
<td>Not Flex</td> 
</tr> 
</table> 

Answer 1

ザ各機能は、既にインデックスシステムを含みます。だから、あなたはこのようにそれを使用することができます（cellIndexはその後廃止されました）：http://jsfiddle.net/TMFg3/

cellIndex = new Array(); 

$('table tr:first-child td.flex').each(function (i) { 

    cellIndex[i] = i; 

    $('td.flex:eq('+i+')').css('background-color', '#ff0000'); 

}); 

あなたがcellIndexを使用するwan't場合は、投稿することができないので、あなたは、各関数の外側のループにそれをする必要がありますインデックス識別子ですへの配列は、それに加えて:)

ます。また、このようcellIndexにインデックスをofcourseの使用することができ、各ループで同じ目標を変更します

cellIndex = new Array(); 

$('table tr:first-child td.flex').each(function (i) { 

    cellIndex[i] = i; 

    $('td.flex:eq('+cellIndex[i]+')').css('background-color', '#ff0000'); 

}); 

Answer 2

あなたは、単にリストあなたを歩くしたい場合できます：

$('table tr td:first-child td.flex').each(function (i) {   
    var cellIndex =$('table tr:first-child td').index(this); 
    $('#hello').text($('#hello').text()+'"'+cellIndex+'",'); 
    $('td').eq(cellIndex).css('background-color', '#ff0000');  
}); 

ここでは、#helloで識別される要素が存在すると仮定します。インデックスが「0」、「2」で、要素が赤色の背景になると仮定します。

$(document).ready(function(){ 
    var myCellIndexes=[]; 
    $('table tr td').parent().find('.flex').css('background-color','green'); 
    $('table tr:first-child td.flex').each(function (i) {   
    var cellIndex =$('table tr:first-child td').index(this); 
    myCellIndexes[i]=cellIndex; 
    $('#hello').text($('#hello').text()+'"'+cellIndex+'",'); 
    $('td').eq(cellIndex).css('background-color', '#ff0000'); 
    }); 
    $('#hello').text($('#hello').text()+myCellIndexes); 
}); 

結果は次のようになります：配列でこれを入れて

「0」、「2」、最後のハローで0,2は、アレイが、今のインデックスを保持していることを実証しています要素。これは、あなたの実際の仕事をやりたいものの実用的な知識を与える必要があります:)