jQuery方法(.css、.html等)在for内部不起作用

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>

演示小提琴

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

在这里，您将直接从表中查找作为第3rd tr的子元素的第3th元素。

但是你看一下你的代码，你会发现每个tr中只有一个th，所以在以后的情况下，它不会找到第三个或第四个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子元素确实存在于标记中，并且循环中的选择器正在查找对于不存在的CCD_ 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");

但它应该是：

    $('#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行之外的任何其他行中都不会有多个CCD_ 3元素。

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