Accessing siblings in jquery

Question

I want to access the sibling of a column :

   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
   </tr>

When i click over 3, how can i access 1?

Answer 1

You can use .siblings jquery function

http://api.jquery.com/siblings/

Answer 2

If I well understood;

var td = $('tr td'), len = td.length;
td.on('click', function() {
    var i = (td.index(this) + 1) % len;
    console.log(td.eq(i));
});

this will return

• 2nd td when you click on 1st td
• 3rd td when you click on 2nd td
• 1st td when you click on 3rd td

example fiddle: http://jsfiddle.net/BmYue/2/

Answer 3

You can use -

$('td:last').on('click', function(){
    $(this).siblings('td:first').css('color', 'red');
})

Demo: http://jsfiddle.net/RK56q/

Answer 4

or you could use .parent() and .children() method as well to access it.

$(this).parent().children()

But easier version is .siblings jquery function.

http://api.jquery.com/parent/ http://api.jquery.com/children/