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

Question

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

为了进一步扩展问题，我想做的是更改不同 table 位置的文本。迭代也工作正常。

       $('#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)')

我认为当命名单元更快且更易于调试时，让代码搜索单元是一种不好的做法。你为什么不 name/number td 标签？

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

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

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

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

Answer 2

The selector outside your loop is looking for td child elements that do exist in your markup and the selectors inside your loop are looking for th child elements that don't exist.

在您提供的 fiddle 中，循环中有这个：

    $('#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 元素。

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

Answer 3

你这部分代码有问题

$('#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");

在这里，您正在寻找 table.

中的第 3 个元素，作为第 3 个 tr 的子元素

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

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

解决方案

1)要么把这个th改成td，然后调整元素号

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

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

工作 fiddle - https://jsfiddle.net/xs4djbrd/5/

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

jQuery methods (.css, .html, etc) not working inside for

html

css

methods

jquery

loops