Table rows not working as siblings for jquery requests

Question

What makes something a sibling for jquery requests?

I want the content within all cells of my table to act as siblings for my jquery requests. Currently only the td values in the same row act as siblings of each other. The next row of td's act as a different "family" if you will.

i.e <table> 
      <tr>
        <td> content here </td>
        <td> more content </td>
      </tr>
      <tr>
        <td> content here </td>
        <td> more content </td>
      </tr>
    </table>

     $("td").click(function () { 
        $(this).siblings().addClass('fadeClick');
        $(this).siblings().removeClass('noFade');
       }

See jfiddle for full code: https://jsfiddle.net/nsn3bpep/7/

(I want all boxes, in both rows, aside from the one hovered/clicked on to be half opaque out)

Answer 1

You need to select all td elements and use this collection instead of siblings. Something like this:

var $td = $("td");
$td.click(function () {
    $("#content").html($(this).find(".hover-content").html());
    $('img[class*="wp-image-"]').removeClass('myClickState');
    $(this).find('img[class*="wp-image-"]').addClass('myClickState');
    divContent = $("#content").html();
    $td.not(this).addClass('fadeClick').removeClass('noFade');
    $(this).removeClass('fadeClick');
});
$td.hover(function () {
    $("#content").html($(this).find(".hover-content").html());
    $(this).addClass('noFade');
    $td.not(this).removeClass('noFade').addClass('fade');
}, function () {
    $("#content").html(divContent);
    $td.not(this).removeClass('fade');
    $(this).removeClass('noFade');
});

Demo: https://jsfiddle.net/nsn3bpep/8/