Jquery如何跳到下一个迭代

Question

我有一个表格，需要将<span> 附加到 td:first-child 单元格和 td:first-child 单元格。

问题：

1. 在第一个 td 中已经存在 <span>。如果<span> 已经存在，如何跳过附加？ （如果 if 语句不知何故不起作用）

2. 我想知道为什么我的代码没有在 td:last-child 中附加 <span>

3. 请看第一列的第二行和第三行，插入文本在单元格中的文本之后（Jill 2 first-col，Jill 2 first-col）。如何将插入文本移到前面？

请帮帮我。谢谢！

$(document).ready(function() {
  $('tr td:first-child').append('<span class="first-col"> first-col</span>');
  if ($('tr td:first-child span').length) {
    return false
  }
  $('tr td:last-child').append('<span class="second-col"> second-col</span>')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td><span class="first-col"> first-col</span>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Jill 2</td>
    <td>Smith 3</td>
  </tr>
  <tr>
    <td>Jill 3</td>
    <td>Smith 3</td>
  </tr>

</table>

Answer 1

您需要将if 语句放在添加新跨度的代码周围。由于您将它放在之后，因此条件始终为真，因此您返回并且永远不会到达将跨度添加到最后一个孩子的代码。

您还需要使用.each()，这样您一次只测试一个TD，而不是全部。

相反，您可以使用 :not(:has(span)) 从选择器中排除已经有跨度​​的 TD。

$(document).ready(function() {
  $('tr td:first-child:not(:has(span))').append('<span class="first-col"> first-col</span>');
  $('tr td:last-child').append('<span class="second-col"> second-col</span>')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td><span class="first-col"> first-col</span>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Jill 2</td>
    <td>Smith 3</td>
  </tr>
  <tr>
    <td>Jill 3</td>
    <td>Smith 3</td>
  </tr>

</table>

Answer 2

您必须使用each() 方法将当前tr td:first-child 定义为this，使用find() 方法和其中指定的span 标签。

$("tr td:first-child").each(function () {
    if (!$(this).find("span").length) {
        $(this).append('<span class="first-col"> first-col</span>');
    }
});

插入带有first-col 类的span 标记，将其放在条件中，并使用布尔运算符NOT。

$(document).ready(function () {
    $("tr td:first-child").each(function () {
        if (!$(this).find("span").length) {
            $(this).append('<span class="first-col"> first-col</span>');
        }
    });
    $("tr td:last-child").append('<span class="second-col"> second-col</span>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%;">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td><span class="first-col"> first-col</span>Jill</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>Jill 2</td>
        <td>Smith 3</td>
    </tr>
    <tr>
        <td>Jill 3</td>
        <td>Smith 3</td>
    </tr>
</table>