javascript - jQuery 只执行 .append 一次

Question

我想向现有表中添加一个额外的行，其中包含一些额外的计算。该表没有标题标记，它只是自行确定要应用的 CSS。我通过下面的代码添加一个额外的 header 。现在它添加了两次标题。该表的(编辑后的)代码如下所示:

<!--This code is in a <form> with the id="train_form", hence the usage in the jQuery code-->
<table class="vis" style="width: 100%">
    <tbody>
        <tr>
            <th style="width: 20%">Eenheid</th>
            <th style="min-width: 400px">Behoefte</th>
            <th>In het dorp/Totaal</th>
            <th style="width: 120px">Rekruteren</th>
            <th style="width: 80px">To Do:</th>
        </tr>

        <tr class="row_a">
            <td class="nowrap">
                <a href="#" class="unit_link" data-unit="spear">
                    <img src="image.png" style="vertical-align: middle" alt="" class="">
                    Speervechter
                </a>
            </td>
        </tr>
        <!-- There are 3 more entries here, but to not be too long I've removed them. They are not really necessary-->
        <tr>
            <td colspan="3">
            </td>
            <td>
                <input class="btn btn-recruit" style="float: inherit" type="submit" value="Rekruteren" tabindex="11">
            </td>
            <th style="width: 80px">To Do:</th>
        </tr>
    </tbody>
</table>

行<th style="width: 80px">To Do:</th>由我的脚本添加。问题是它还将它添加到最后一个 <td> 。我看过很多“解决方案”，但它们没有帮助。它仍然添加代码两次(参见下面的屏幕截图)。

我用来添加行的代码:

$(function() {
    var done = false;
    if (!done) {
        $("#train_form > .vis > tbody > tr:not(.row_a, .row_b)").one().append("<th style='width: 80px'>To Do:</th>");
        done = true;
    };
}).one();

如您所见，我尝试使用 .one()方法，我尝试使用 bool 来实现。两者都不起作用，因为此代码仍然提供上图中所示的表格。

需要明确的是，我无法控制源代码，这是一个在线浏览器游戏的脚本。

我做错了什么？

Answer 1

我想你想要$.first()而不是$.one() :

$("#train_form > .vis > thead > tr:not(.row_a, .row_b)")
    .first()
    .append("<th style='width: 80px'>To Do:</th>");