Question

I am using JavaScript with jQuery. I have script as;

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

used with my table;

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

The table has two rows (may contain more rows with same repeated pattern). The script is suppose to alert value on the cell just above the cell, class="bbb" I click class="ccc". But instead, it displays data in all cells above that having class="bbb". How can I solve this?

You can see my Fiddle here.

Answer 1

If I understood you correctly, then you can do it as follows:

Get the index of the currently clicked cell:

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

Then select the cell with this index + 1 from the previous row:

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

Updated DEMO

Reference: index, eq

Update: In fact, if every table cell only contains one .bbb element, you can also do:

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