從特定單元格中選擇數據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); 
}); 
}); 

與我的表一起使用;

<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> 

該表有兩行（可能包含更多的行具有相同的重複模式）。腳本假設提醒單元格正上方的單元格的值，class="bbb"我點擊class="ccc"。但相反，它顯示的數據位於class="bbb"以上的所有單元格中。我該如何解決這個問題？

你可以看到我的小提琴here。

在此先感謝..

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'元素並綁定特定事件一次，ins每次點擊都會經歷很多遍歷。

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) 
}); 

另：//輸出類似：Q/W等

$('.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

使用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); 
});