javascript - jquery 应该表现相同的不同选择器有不同的行为

Question

我有一个功能，当单击 td 时，它会找到其正上方的 th 并更改其宽度

之前我没有为我的 td 和 th 提供类，所以我使用这个选择器

var selectedTh = $this.closest('table').find('th').eq($this.index());

它工作得很好，并按应有的方式改变了宽度。

现在我想重构它，所以我有一个用于 td 和 th 的类(每列的特定类) - 我尝试使用这个选择器

var selectedTh = $('th',$(this).attr('class'));

当我调试它时，我很确定它正在选择我想要的但当我这样做之后

 var tableWidth = $('table').width();
                var colWidth = tableWidth / $('th', $table).length;
                selectedTh.addClass("fullWidth");
                selectedTh.animate({
                    width: colWidth + 100
                    }, 150);

它什么也没做

只是为了澄清我正在寻找的类不是我添加的全 Angular ，它是一个之前设置并存在于其中的类。

当我使用以前的选择器时，它正确地更改了它

知道如何使用选择器按类选择正确的元素吗？

Answer 1

$(this).attr("class") 将返回元素的完整 class 属性，其中:

1. 其中可能有多个类
2. 不会有 . 表明它是一个类选择器

所以不，他们不做同样的事情。此外，第二个查找具有给定类的元素内的第 th 元素，如果 this 是一个 ，则没有意义>td。

您可能最好使用现有的，但如果您担心 colspans 或类似的问题，如果您向 td 和 th 添加一个公共(public)类并且保证td只有一个类，你可以这样做:

var selectedTh = $this.closest('table').find('th.' + $this.attr("class"));

或者也许更好，向 td 添加一个 data-th-class 属性并执行以下操作:

var selectedTh = $this.closest('table').find('th.' + $this.attr("data-th-class"));

...这样您就可以向 td 添加其他类，而不会破坏它。