Question

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

当您点击<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;
    });
});

它与第一个兄弟姐妹在this jsFiddle中正常工作。

好吧，我想对所有<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 example

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

这将有效：

$(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/

Answer 4

我使用点击功能中th标识的this点击元素的index方法设置它是有效的（索引返回基于零的值）

代码：

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

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

jQuery中的第N个通配符？

4 个答案: