Question

我有以下jQuery，我试图用它来改变其标题有一个类的列的背景颜色。

例如：

$('th').each(function (i) {

            if ($(this).hasClass('headerSortUp') || $(this).hasClass('headerSortDown')) {
                sortIndex = $(this).index();
            }
            $('tr').each(function () {
                $('td:eq(' + sortIndex + ')').css('background-color', 'orange');
            });

        });

所以，如果我有一个像这样的表：

<table>
<tr>
    <th class="headerSortDown">Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
</tr>
<tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
</tr>
<tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
</tr>
<tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
</tr>
</table>

所以在这个例子中，整个第一列应该有一个bg的橙色。然而它不起作用......任何想法我做错了什么？感谢

Answer 1

您忘了指定上下文

$('td:eq(' + sortIndex + ')', this).css('background-color', 'orange');

Answer 2

尝试将sortIndex = $(this).index();更改为sortIndex =i;和
$('td:eq(' + sortIndex + ')').css('background-color', 'orange');到

$('td:eq(' + sortIndex + ')',$(this)).css('background-color', 'orange');选择td和tr

Answer 3

没有必要迭代<th>元素 - 选择器可以选择具有正确类别的元素。

然后，您可以使用.index()查找其列值，并:nth-child()一次性选择该列中的每个<td>：

$('.headerSortUp, .headerSortDown').each(function() {
    var n = $(this).index() + 1;
    $('td:nth-child(' + n + ')').css('background-color', 'orange');
});

http://jsfiddle.net/jNsF4/

的工作演示

[我还注意到原始代码有一个逻辑错误 - 更改颜色的代码应该在if { ... }块内，而不是在它之外。

Answer 4

可能有一个更好的选择器导致更少的迭代

var sortIndex;

$('th').each(function (i) {

            if ($(this).hasClass('headerSortUp') || $(this).hasClass('headerSortDown')) {
                sortIndex = $(this).index();
            }
    });


$('td:nth-child(' +sortIndex+1+')').css('background-color', 'orange');

您可以在此处查看小提琴http://jsfiddle.net/ryan_s/nZr9G/

jquery：如果列的标题有一个类，则更改列的背景颜色

4 个答案: