jquery - jQuery中的第N个类型通配符？

Question

我正在使用 jQuery 更改表中某些元素的类。

预期的行为是，当您单击 a 时，在他的所有（在他的列中）中<th>添加一个类。<td>

我有这个 jQuery：

$(document).ready(function() {
    $("table.tabla th:nth-of-type(1)").click(function () {
        $("table.tabla td:nth-of-type(1)").toggleClass('on');
    return false;
    });
}); 

它与第一个兄弟在这个 jsFiddle中正常工作。

好吧，我想对 all 做同样的事情<th>，但我不知道表中有多少<th>（这是一个动态表。）

有没有办法制作类似的东西th:nth-of-type(x)？

Answer 1

尝试像这样使用 index() ：

$("table.tabla th").click(function () {
    $("table.tabla td:nth-of-type("+($(this).index()+1)+")").toggleClass('on');
    return false;
});

jsFiddle 示例

Answer 2

您可以尝试动态对象的 jQuery ".on" 方法，您还需要使用 $(this) 对象查找当前 th 并查找其子 td 以将其类切换为“on”。

    $(document).ready(function() {
       $("table.tabla th").on("click", function () {
          ind = $(this).index()+1;
          $('td:nth-of-type(' + ind + ')').toggleClass('on');
       });
    }); 

Answer 3

我使用点击函数内部标识的被点击元素的index方法设置它工作（索引返回基于零的值）ththis

代码：

$("table.tabla th").click(function () {
    $("table.tabla td:nth-of-type("+($(this).index()+1)+")").toggleClass('on');
    return false;
});

这是一个小提琴：http: //jsfiddle.net/IrvinDominin/eBzYm/

Answer 4

这将起作用：

$(document).ready(function() {
$("table.tabla th").click(function () {
    var x = parseInt($(this).index()) + 1;
    $("table.tabla td:nth-of-type(" + x + ")").toggleClass('on');
return false;
});
}); 

演示：http: //jsfiddle.net/tymeJV/3HzLf/3/