Javascript 将类添加到<；上的div上；th>；点击

我有一个10列的表格标题。在这些列中的每一列中都有一些文本和一个div。div的用途是有一个箭头图像，指示表是升序排序还是降序排序

现在，当用户单击th时，我希望jQuery将一个.headerSortUp类添加到该th内的div中。。以下是我目前得到的信息：

HTML：（用于标题列）

CSS:

---

我不明白为什么我的jQuery没有将类添加到div。。有人能指出为什么我的jQuery不起作用吗？谢谢

因为

这个
在
$（this.addClass（“headerSortUp”）引用已单击的项目。在本例中，这是
$（“#未结订单tr th”）
，而不是
div

$("#open-orders tr th").click(function(){
    $("#open-orders").find(".headerSortUp").removeClass("headerSortUp");
    $(this).find('div').addClass("headerSortUp");
});

另外，在这种情况下，您的CSS是错误的。您不希望在
.sorter
之后有空格：

table.tablesorter thead tr th .sorter.headerSortUp {
    background-image: url("/wcmedia/asc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}
table.tablesorter thead tr th .sorter.headerSortDown {
    background-image: url("/wcmedia/desc1.gif");
    background-repeat: no-repeat;
    background-position: left;

事实上，我怀疑有必要这么具体。这是一个非常慢的选择器
.headerSortUp{}
可能就足够了。如果需要，在左侧添加一个元素

选项2
您也可以不使用JS，而更改CSS：

.headerSortUp .sorter{
    background-image: url("/wcmedia/asc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}
.headerSortDown  .sorter {
    background-image: url("/wcmedia/desc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}

也就是说，将这些样式应用于
.headerSortUp
和
.headerSortDown
中的任何
.sorter
元素这里的问题是CSS选择器；为此：

美元（“#未结订单）

您正在使用CSS选择器将类名添加到
th
元素中：

table.Tables分拣机thead tr th.分拣机Headers分拣机Down

您可以使用class
headerSortDown
inisde
.sorter
将一个元素作为目标，您需要的是将CSS选择器更改为：

table.tablesorter thead tr th.headerSortUp .sorter  {
  background-image: url("/wcmedia/asc1.gif");
  background-repeat: no-repeat;
  background-position: left;
}
table.tablesorter thead tr th.headerSortDown  .sorter {
  background-image: url("/wcmedia/desc1.gif");
  background-repeat: no-repeat;
  background-position: left;
} 

将
th
元素与该类名匹配

记住要使bg图像可见您需要元素上的尺寸
正是我需要的！谢谢你的解释。。你就是那个人！我将在7分钟内给出答案（我必须等很长时间才能接受）。很高兴它起了作用。NB@Danko的评论“记住让bg图像可见，你需要在元素上标注尺寸”
table.tablesorter thead tr th .sorter.headerSortUp {
    background-image: url("/wcmedia/asc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}
table.tablesorter thead tr th .sorter.headerSortDown {
    background-image: url("/wcmedia/desc1.gif");
    background-repeat: no-repeat;
    background-position: left;

.headerSortUp .sorter{
    background-image: url("/wcmedia/asc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}
.headerSortDown  .sorter {
    background-image: url("/wcmedia/desc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}

table.tablesorter thead tr th.headerSortUp .sorter  {
  background-image: url("/wcmedia/asc1.gif");
  background-repeat: no-repeat;
  background-position: left;
}
table.tablesorter thead tr th.headerSortDown  .sorter {
  background-image: url("/wcmedia/desc1.gif");
  background-repeat: no-repeat;
  background-position: left;
}