表行不作为jquery请求的兄弟节点

时间:2015-03-27 22:36:01

标签: javascript jquery html html-table siblings

什么使得jquery请求成为兄弟姐妹的东西?

我希望我表中所有单元格中的内容充当我的jquery请求的兄弟姐妹。目前,只有同一行中的td值充当彼此的兄弟姐妹。下一行td充当了一个不同的家庭"如果你愿意的话。

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');
       }

请参阅jfiddle获取完整代码:https://jsfiddle.net/nsn3bpep/7/

(我想要两个行中的所有盒子,除了悬停/点击的那一个是半透明的)

1 个答案:

答案 0 :(得分:2)

您需要选择所有td元素并使用此集合而不是兄弟姐妹。像这样:

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');
});

演示: https://jsfiddle.net/nsn3bpep/8/