在匹配集之后添加 TR，如果 jQuery 中匹配集为空，则在末尾添加 TR

Question

问题

我想在表中的给定匹配集之后添加新的 TR，或者如果匹配集为空，则在表的末尾添加新的 TR。给定以下 html：

<table id="blax">
   <thead>
   </thead>
   <tbody>
      <tr class="alpha">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <tr class="alpha">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <!-- new "alpha" tr to go here-->
      <tr class="beta">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <tr class="beta">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <!-- but new "gamma" tr to go at end-->
   </tbody>'
</table>

我知道如何在某些匹配的集合之后添加新的 tr，例如：

var b = $('#blax tbody');
var newAlphaTr = $('<tr class="alpha"></tr>')
   .insertAfter(b.find('tr.alpha:last'));

但是如果为类 gamma （表中尚不存在）运行相同的代码会怎么样？ ？有什么简单的方法可以使用相同的方法将新 元素的插入点放在表格的末尾用于 alpha 插入的代码？

function insertAtPosition(parentElement, afterElement, newElement) {
   // some code here that does the job for either "alpha" or "gamma"
}

function creatElement(className) {
   insertAtPosition(
      b,
      b.find('tr.' + className + ':last'),
      $('<tr class="' + className + '"></tr>'
   );
}

createElement('alpha');
createElement('gamma');

我需要帮助填写“此处的一些代码”块。

现在闲聊

顺便说一句，insertAfter 返回插入的元素还是后面添加的项目？我猜测 after 返回插入的项目，而 insertAfter 返回其附加的项目，就像 append 和 的方式一样appendTo 工作，是吗？ jQuery 文档很好，但有一些大漏洞，例如没有列出每个函数返回的内容（我很困惑为什么有人会错过这一点）。事实上，当我写这个问题时，我需要集中注意力才能确保我答对了。

只是闲想，如果 append 和 appendTo 支持一个可选参数，该参数可以是索引位置，也可以是之后的直接子元素（或直接子元素集）所有这些项目都将被附加。对于索引，它可以是所需的位置，也可以是要插入项目的位置，因此 0 或 -1 表示作为第一个子项。

var b = $('#blax tbody');
var newAlphaTr = $('<tr class="alpha"></tr>')
   .appendTo(b, $('tr.alpha', b));
// or perhaps a selector
var newAlphaTr2 = $('<tr class="alpha"></tr>')
  .appendTo(b, 'tr.alpha:last');

这将在指定的子集之后插入一个具有类 alpha 的新 tr。我可以将 :last 添加到选择器，但这种方式会很好。如果“td.alpha”的匹配集为空，那么它将像通常的追加操作一样，并将其放在现有子项之后。

Answer 1

<tbody id='zeta'/>

$('#zeta').append('<tr class="alpha"></tr>');

你愿意把它当作 if/else 吗？

if( $('.alpha').length>0){
//追加到类上
}其他{
//附加到tbody上
}

Answer 2

自从提出这个问题以来，我已经有了近 2 年的 jQuery 经验，现在我可以看到答案很简单：

var b = $('#blax tbody'),
   newAlphaTr = $('<tr class="alpha"></tr>')
      .insertAfter(
         b.find('tr.alpha:last, tr:last')
            .first()
      );

不要只在 tr 上与所需的类匹配，还要匹配最后一个 < code>tr 无论类别如何。然后，使用 first() 获取第一个，这将是我们要在后面插入的那个。问题解决了。