特定のセルからデータを選択する - javascript - jQuery

Question

jQueryでjvascriptを使用しています。私はスクリプトを持っています。

$(document).ready(function() { 
$('.ccc').click(function(index) { 
    var $title = $(this); 
    var $flag = $title.parent().prev().children('.aaa').children('.bbb'); 
    var flag = $flag.text(); 
    alert(flag); 
}); 
}); 

myテーブルで使用します。

<table style="width: 100%"> 
    <tr> 
    <td rowspan="2">x</td> 
    <td class="aaa">1<span class="bbb">q</span></td> 
    <td class="aaa">2<span class="bbb">w</span></td> 
    <td class="aaa">3<span class="bbb">e</span></td> 
    <td class="aaa">4<span class="bbb">r</span></td> 
    <td class="aaa">5<span class="bbb">t</span></td> 
    <td rowspan="2">x</td> 
    </tr> 
    <tr> 
    <td class="ccc">6</td> 
    <td class="ccc">7</td> 
    <td class="ccc">8</td> 
    <td class="ccc">9</td> 
    <td class="ccc">10</td> 
</tr> 
</table> 

テーブルには2つの行があります（同じ繰り返しパターンの行がさらに含まれることがあります）。このスクリプトは、セルのすぐ上にあるセルの値を警告すると仮定します。class="bbb"をクリックします。class="ccc"をクリックします。代わりに、それはclass="bbb"を有するものより上のすべてのセルにデータを表示します。これをどうすれば解決できますか？

私のフィドルhereを見ることができます。クラスが使用されている最初のインスタンスを取得するために、第1のセレクタ：事前に

おかげ..

Answer 1

私が正しくあなたを理解している場合、次のように、あなたはそれを行うことができます。

現在クリックされたセルのインデックスを取得します：

var index = $(this).index(); 

次に選択前の列のこのインデックスのセル+ 1：

$('.ccc').click(function() { 
    var index = $(this).index(); 
    var $flag = $(this).parent().prev().children().eq(index + 1).children('.bbb'); 
    alert($flag.text()); 
}); 

Updated DEMO

リファレンス：index、eq

更新：実際には、すべてのテーブルのセルは一つだけ.bbbの要素が含まれている場合、あなたも行うことができます。

var $flag = $(this).parent().prev().find(`.bbb`).eq(index + 1); 

を

Answer 2

$(document).ready(function() { 
$('.ccc').click(function(index) { 
    var $title = $(this); 
    var $flag = $title.parent().prev().children('.aaa:first').prev(); 
    var flag = $flag.text(); 
    alert(flag); 
}); 
}); 

を使用してください。

http://api.jquery.com/first-selector/

http://jsfiddle.net/ChrXQ/1

Answer 3

これがあなたの望むものなら。

$('.ccc').click(function(index) { 
    var $t= $(this); 
    var idx = $t.prevAll('.ccc').size(); 
    var $flag = $t.parent().prev().children('.aaa').eq(idx).children('.bbb'); 
    var flag = $flag.text(); 
    alert(flag); 
}); 

http://jsfiddle.net/hskVW/1/

私の第二の提案は... abdullah.abcoderによく似ています（唯一の違いは、私は結果が結合事象のためにキャッシュすることができると思うである）、参照してください。

var $c = $('.ccc'); 
$('.aaa').each(function(i){ 
    var $t = $(this); 
    $c.eq(i).click(function(){ 
     alert($t.children('.bbb').text()); 
    }) 
}) 

http://jsfiddle.net/hskVW/8/

レイアウトが動的ではない場合、あなたは一度だけ、特定のイベントを「.ccc」要素を取得し、バインドすることができている私の理由は、イン1回のクリックで多くのトラバースを楽しむことができます

Answer 4

してみてくださいこの：のように//出力：1Q/2Wなど

$('.ccc').each(function(index, val) { (function() { 
     $('.ccc:eq(' + index + ')').bind('click', 
     function() { 
      var $title = $(this); 
      var $flag = $title.parent().prev().children('.aaa:eq(' + index + ')'); 
      var flag = $flag.text(); 
      alert(flag); 
     }); 
    })(index) 
}); 

別：など

$('.ccc').each(function(index, val) { (function() { 
     $('.ccc:eq(' + index + ')').bind('click', 
     function() { 
      var $title = $(this); 
      var $flag = $title.parent().prev().children('.aaa:eq(' + index + ')').children('.bbb'); 
      var flag = $flag.text(); 
      alert(flag); 
     }); 
    })(index) 
}); 

Answer 5

使用はq/wのみ希望の項目を取得するためのEQ：//などの出力;）

$('.ccc').click(function(index) { 
    var index = $(this).index(); //here is the trick 
    var $title = $(this); 
    var $flag = $title.parent().prev().children('.aaa:eq('+index+')').children('.bbb'); //and here our new selector 
    var flag = $flag.text(); 
    alert(flag); 
});