jQuery 方法（.css、.html 等）在内部不起作用

Question

这些方法在循环外而不是在循环内工作是否有原因？我什至还没有处理位置，颜色或文本更改也不起作用。

为了进一步扩展问题，我想做的是更改不同表格位置的文本。迭代也运行良好。

       $('#tbody_tabla > tr:nth-child(3) > td:nth-child(5)').css("color", "red");

       for (var i = 0; i < fechas.length; i++) {
           for (var j = 0; j < nombres.length; j++) {
                $('#tbody_tabla > tr:nth-child(3) > th:nth-child(3)').css("color", "red");
                 $('#tbody_tabla > tr:nth-child(4) > th:nth-child(4)').html("val");

              }
         }

       $('#tbody_tabla > tr:nth-child(3) > td:nth-child(2)').css("color", "red");
       $('#tbody_tabla > tr:nth-child(2) > td:nth-child(2)').html('HOLA');

我也会添加 HTML

<table class="table table-bordered" id="tabla_servicios" style="width:100%; padding:12px">
<tbody id="tbody_tabla">
    <tr>
        <th></th>
        <th>2014-01-01 00:00:00</th>
        <th>2014-02-13 00:00:00</th>
        <th>2014-03-01 00:00:00</th>
        <th>2014-04-01 00:00:00</th>
    </tr>
    <tr>
        <th>Value2</th>
        <td>2,2</td>
        <td>2,3</td>
        <td>2,4</td>
        <td>2,5</td>
    </tr>
    <tr>
        <th>Value3</th>
        <td>3,2</td>
        <td>3,3</td>
        <td>3,4</td>
        <td>3,5</td>
    </tr>
    <tr>
        <th>Value4</th>
        <td>4,2</td>
        <td>4,3</td>
        <td>4,4</td>
        <td>4,5</td>
    </tr>
    <tr>
        <th>Value5</th>
        <td>5,2</td>
        <td>5,3</td>
        <td>5,4</td>
        <td>5,5</td>
    </tr>
    <tr>
        <th>Value6</th>
        <td>6,2</td>
        <td>6,3</td>
        <td>6,4</td>
        <td>6,5</td>
    </tr>
    <tr>
        <th>Value7</th>
        <td>7,2</td>
        <td>7,3</td>
        <td>7,4</td>
        <td>7,5</td>
    </tr>
    <tr>
        <th>Value8</th>
        <td>8,2</td>
        <td>8,3</td>
        <td>8,4</td>
        <td>8,5</td>
    </tr>
</tbody>
</table>

Demo fiddle

Answer 1

我以前从未见过这样的子选择。

$('#tbody_tabla > tr:nth-child(3) > td:nth-child(5)')

我认为当命名单元更快且更易于调试时对单元进行代码搜索是不好的做法。为什么不对 td 标签命名/编号？

$("#tbody_tabla > tr").eq(3).children().eq(5).css("color", "red");

上述方法可能有效。如果做不到这一点，请提供示例 HTML，以便人们有更好的机会帮助您。

另请参阅：http://api.jquery.com/find/

已编辑：@joseph-marikle 建议使用 children() 而不是 find()

Answer 2

问题在于你的这部分代码

$('#tbody_tabla > tr:nth-child(3) > th:nth-child(3)').css("color", "red");
$('#tbody_tabla > tr:nth-child(4) > th:nth-child(4)').html("val");

在这里，您正在从表中直接寻找第 3 个元素作为 3rd tr 的子元素。

但是你看一下你的代码，你会看到每个 tr 只有一个 th ，所以在后面的情况下它不会找到第 3 或第 4 个 tr。

Problematic part
    > th:nth-child(3)
    > th:nth-child(4)

解决方案

1) 要么将此 th 更改为 td 并调整元素编号

> td:nth-child(4)
> td:nth-child(5)

2) 将所有 td 更改为 th，您的代码就可以工作了

工作小提琴 - https://jsfiddle.net/xs4djbrd/5/

Answer 3

循环外的选择器正在寻找 td 子元素 确实存在于您的标记中，并且循环内的选择器正在寻找 对于不存在的th 子元素。

在你提供的小提琴中，你有这个循环：

    $('#tbody_tabla > tr:nth-child(3) > th:nth-child(3)').css("color", "red");
    $('#tbody_tabla > tr:nth-child(4) > th:nth-child(4)').html("val");

但应该是：

    $('#tbody_tabla > tr:nth-child(3) > td:nth-child(3)').css("color", "red");
    $('#tbody_tabla > tr:nth-child(4) > td:nth-child(4)').html("val");

因为除了第 1 行之外的任何其他行中都不会有多个 th 元素。

此外，由于您没有在任何地方使用循环变量，因此我不知道您的循环在小提琴中的作用。你只是一遍又一遍地循环相同的元素，每次都试图做同样的事情。