选择表中具有类的下一个元素

Question

I have a Task list in a table with 3 columns and multiple rows. In column 1 I have a checkbox. In column 2 I have some text and in column 3 I have a date and two icons which are hidden initially. When the checkbox is clicked I add a class to the row in which the clicked checkbox is contained. The class marks the item as "done". But adding the class alone is not enough, I also want to show the two icons which are hidden initially. So I only want to show the two on the row in which the clicked checkbox is contained.

Have been fooling around with next and parent and the rest of the family but not successfully.

Any help on this would be sweet!

at the moment what I have jquery wise is this

$('.task-checkbox').click(function() {
  $(this).closest('tr').toggleClass('task-done');
  $(this).parent().next('.done-n-delete-icons').toggle();
});

created a jsfiddle here http://jsfiddle.net/zf7HH/1/

Answer 1

Else , no need to toggle that other class, just use the one applied to tr :

.task-done .done-n-delete-icons {
    display:block;
}

DEMO

---

With external ressource fixed : DEMO

Answer 2

You need to go up one more parent and then use the find method.

http://jsfiddle.net/zf7HH/2/

$('.task-checkbox').click(function() {
    $(this).closest('tr').toggleClass('task-done');
    $(this).parent().parent().find('.done-n-delete-icons').toggle();
});

Answer 3

$('.task-checkbox').click(function() {
  $(this).closest('tr').toggleClass('task-done');
  $(this).closest('tr').find('.done-n-delete-icons').toggle();
});