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

如果这是你想要的。

$('.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'元素并仅绑定特定事件一次，而不是在每次点击时遍历很多。

Answer 3

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

使用：first选择器获取使用该类的第一个实例。

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

http://jsfiddle.net/ChrXQ/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)
});

另一个：//输出如：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);
});

从特定单元格中选择数据 - javascript - jQuery

5 个答案: