应该采取相同行为的jquery不同选择器具有不同的行为

时间:2017-04-06 06:39:19

标签: javascript jquery

我有一个功能,当点击一个td时,它会找到它正上方的那个并改变它的宽度

之前我没有为我的td和我使用这个选择器的课程

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

它什么都不做

只是为了澄清我正在寻找它的类不是我添加的全部宽度是一个之前设置并存在的类。

当我使用上一个选择器时,它正确地更改它

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

1 个答案:

答案 0 :(得分:2)

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

  1. 可能有多个课程
  2. 不会让.表示它是类选择器
  3. 所以不,他们不做同样的事情。此外,第二个在中查找具有给定类的元素中的th ,如果thistd,则没有意义。

    您可能最擅长拥有的内容,但如果您担心colspans或类似内容,如果您向tdth 和保证td只有一个类,你可以这样做:

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

    或者更好的是,向data-th-class添加td属性并执行:

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

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