使用jQuery

Question

如何在table内获取div的特定单元格的值？ 不幸的是，我似乎无法通过自己找到如何做到谷歌搜索并没有帮助我： - （

示例：

<div class="s3">
    <table id="content" cellpadding="3" cellspacing="0">
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
        </tr>
    </table>
</div>
<div class="s3">
    <table cellpadding="3" cellspacing="0">
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
        </tr>
    </table>
</div>
<div class="s3">
    <table cellpadding="3" cellspacing="0">
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
        </tr>
    </table>
</div>

<script>

    $(document).ready(function () {
        var count = $(".s3").length;

        for (var i = 0; i++; i < count) {
            $(".s3 div:eq(i) td:eq(0)").html("12345678");
        }
    });

</script>

我想一次更改所有第一个单元格的值，但它不起作用。

我做错了什么？

Answer 1

为什么您的代码不起作用

构建选择器的方式无法按预期方式工作。当您在JavaScript中编写"div:eq(i)"时，该字符串将包含实际的字符 i（＆＃34; div：eq（i）＆＃34;），而不是当前值变量i的（例如＆＃34; div：eq（2）＆＃34;）。

解决方案1 ​​

有两种方法可以实现您想要实现的目标。第一个变体是你在代码中的方式，但是用变量：

构建选择器字符串

for (var i = 0; i++; i < count) {
    $(".s3 div:eq(" + i + ") td:eq(0)").html("12345678");
}

这会将变量i的值按预期填充到选择器中，但不起作用，因为选择器.s3 div匹配内的<div> 具有class="s3"的元素：

<div class="s3">
    <div>div you are targeting now</div>
</div>

要选择具有类s3本身的div，您可以使用div.s3或只省略元素标记，只选择通过.s3使用该类：

for (var i = 0; i++; i < count) {
    $("div.s3:eq(" + i + ") td:eq(0)").html("12345678");
}

解决方案2

但是，使用jQuery，您还可以选择所有div的第一列并更改text / html
所有这些，而不需要循环它们：

$(".s3 td:first-child").text("12345678");

• 使用text()代替.html()，因为您要插入文字，而不是HTML
• 直接选择您要更改的所有<td>

• 使用:first-child（支持浏览器）而不是:eq(0)（仅支持jQuery）。

  这对于这个小例子来说无关紧要，但选择使用HTML标准选择器使用浏览器的本机DOM引擎来选择元素而不是使用较慢的，特定于jQuery的选择器引擎，并且将是一个在更大的现实应用中更快一点

• 删除了for循环，因为jQuery可以为您做到这一点

玩得开心学习jQuery！