javascript - 使用 nextUntil 查找当前单元格的索引

Question

这是我试图从中学习的问题

jQuery selector to grab cells in the same column

在提出任何使用索引和第 nth-child 的答案之前，我一直在考虑计算 $(this) 单元格之前的单元格数量 - 例如

var columnNo = parentRow.nextUntil($(this),"td").length;
console.log(columnNo); // gives 0 - what am I missing?
parentTable.find("tr td:nth-child(" + (columnNo+1) + ")")

http://jsfiddle.net/mplungjan/JUt4F/

问题:

1. 为什么 nextUntil 不给出前面单元格的长度？

2。为什么点击只起作用一次？

请注意，我知道(在问这个之前)我可以使用 index.我只是想修复我的脚本以探索 nextUntil

更新:我似乎混合了 nextAll 和 nextUntil 并且可能想象出某种 nextAllUntil

Answer 1

nextUntil() 方法将在父行中找到第一个 td 标签。使用该逻辑，您只需选择每行中的第一个单元格。每次点击都有效——您只是将同一列一遍又一遍地涂成红色。

您需要做的是搜索父行上的所有 td 标记，并使用 jQuery 的 index() 方法来确定该行中被单击的单元格的位置.

一个很小的调整就可以解决这个问题:

$("td").on("click",function(){
    var parentTable = $(this).closest("table");
    var parentRow = $(this).parent();
    console.log(parentRow);
    var columnNo = parentRow.find('td').index($(this));
    console.log(columnNo);
    parentTable.find("tr td:nth-child(" + (columnNo+1) + ")")
        .css("color", "red");
});​

工作示例:http://jsfiddle.net/JUt4F/15/