id 以开头的第一个兄弟的选择器

Question

无法为以下场景找到正确的 selector/jquery 代码。想要从 id 以 SIEcat 开头的 tr 的起点在以 SIEcat 开头的下一行之前插入新行？

<table>
  <tr id="SIEcat1"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr id="SIEcat2"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
</table>

等等

到目前为止的代码

$("#SIEcat1").selectorcodeXXX.before('<tr class="SIErow">xxxx</tr>');

Answer 1

您可以使用 "start with" 选择器：^= 和 first 方法，
像这样：$('[id^=SIEcat]').first()

$('[id^=SIEcat]').first().before('<tr class="SIErow"><td>xxxx</td></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="SIEcat1"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr id="SIEcat2"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
</table>

Answer 2

结合使用 CSS 属性开头和 jQuery 的 nextAll() 选择器：

$('[id^=SIEcat]').nextAll('[id^=SIEcat]').before('<tr class="SIErow"><td>xxxx</td></tr>');

这会选择 ID 以 SIEcat 开头的元素，然后遍历所有后续的兄弟元素，直到找到下一个 ID 以 SIEcat 开头的元素并在它之前插入行。

Codepen example.

Answer 3

您可以使用以下选择器：

$('[id^=SIEcat]:not(:first-child)').before('<tr class="SIErow"><td>xxxx</td></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="SIEcat1"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr id="SIEcat2"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
  <tr class="SIErow"><td>Columncode</td></tr>
</table>

id 以开头的第一个兄弟的选择器

selector for first sibling with id starting with

jquery

insert

selector