CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-tablesiblings
ggycan
ggycan

Reputation: 25

Table rows not working as siblings for jquery requests

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)

Upvotes: 2

Views: 135

Answers (1)

dfsq
dfsq

Reputation: 193291

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/

Upvotes: 2

Related Questions