Question

鉴于下表：

    <table>
        <tr class="one"><td>Hello</td></tr>
        <tr class="one"><td>Hello</td></tr>
        <tr class="one"><td>Hello</td></tr>
        <tr class="two"><td>World</td></tr>
        <tr class="two"><td>World</td></tr>
    </table>

是否可以使用JQuery在第3行和第4行之间插入一行（当类从“一”变为“两”时）？如果是这样，怎么样？

我想也许在某种组合中使用insertAfter（）和.last（）......

Answer 1

$('table tr:nth-child(3)').after('<div>....</div>');

这将在每次第3行之后插入一些东西！

$('table .one:nth-child(3)').after('<div>....</div>');

这会在第3 .one课后插入一些内容。

$('table .two:nth-child(1)').before('<div>....</div>');

这将在第一个.two课程之前插入。这意味着它将介于.one和...之间。 .two。

修改

根据我对您的评论的理解，您希望在最后.one tr之后插入一个元素。

这可以通过以下方式轻松完成：

$('.one').last().after('<div>...code goes in here...</div>');

OR

$('.one:last-child').after('<div>...</div>');

Answer 2

如果你这样做很容易，我的意见！

$("table").find(".one").eq(-1).after($("<tr><td>").text("circle of life"))

* find（），查找类.one *
* eq（-1），less element *
after（）之后，将对象放在eq（-1）元素
*（$（＆＃34;＆＃34;），使对象*
text（），设置对象的文本

＆＃13;

$("table").find(".one").eq(-1).after($("<tr><td>").text("circle of life"))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="one">
    <td>Hello</td>
  </tr>
  <tr class="one">
    <td>Hello</td>
  </tr>
  <tr class="one">
    <td>Hello</td>
  </tr>
  <tr class="two">
    <td>World</td>
  </tr>
  <tr class="two">
    <td>World</td>
  </tr>
</table>

＆＃13;

Answer 3

像这样。

$('table .one:last-child').after(your html here)

编辑：我似乎偶然发现了对last-child选择器的常见误解。如果您对我的答案为何不起作用感到好奇，请阅读此内容。 :last-child not working as expected?

更正后的答案为$('table .one:last').after(your html here)

如何使用JQuery在特定类的最后一行之后插入行？

3 个答案:

修改