jQuery-获取除第一行和最后一行之外的所有行

Question

我想动态地给表格中除第一行和最后一行之外的所有行添加一个类。如果不用分配CSS类来标识它们，我该怎么做呢？目前我正在使用以下代码获得除第一行之外的所有行： ```javascript $("tr:not(:first)").addClass("myclass"); ```

```javascript $("tr:not(:first):not(:last)").addClass("myclass"); ```

$("#id").find("tr:gt(0)")

我需要将这个与not("tr:last")结合起来，不知道怎么做？

- user210757

Answer 1

删除gt()，因为我推测它比:first略慢一点。

使用:first和:last与not()结合使用：

$('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');

如果表格标记缺少tbody元素，大多数浏览器会自动添加一个，这就是为什么立即子元素选择器失败的原因 - 在<table>标记下没有<tr>元素作为立即子元素。

我并不100%确定所有浏览器都是这样做的，所以最好手动添加<tbody>。否则，您需要进行一些嗅探，并且不能将其作为单行处理：

if($('table#tbl > tbody').size() > 0) {
    $('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');
} else {
    $('table#tbl > tr').not(':first').not(':last').addClass('highlight');
}

希望这能解决你的问题！

- Tatu Ulmanen

---

这个可以正常工作 - 除非最后一行有一个表格 - 这就是情况。这是一个服务器控件，所以不能轻易更改。有什么想法吗？<table id="tbl"> <tr><td>标题</td><td>标题</td></tr> <tr><td>一</td><td>一</td></tr> <tr><td>二</td><td>二</td> <tr><td colspan="2"> <table border="0"> <tr> <td>页脚一</td><td>页脚二</td><td>页脚三</td><td>页脚四</td> </tr> </table> </td></tr> </table> - user210757

当然，使用$('#id > tr')而不是$('#id tr')。这会强制选择器仅选择直接子元素。这要求#id元素是一个<table>。 - Tatu Ulmanen

感谢您的回复。例如，使用我在第一条评论中发布的HTML表格，$('#tbl > tr').not(':first').not(':last').addClass("highlight");似乎无法正常工作，$('table#tbl > tr').not(':first').not(':last').addClass("highlight");也是如此。 - user210757

tatu - 我把这个标记为答案了 - 感谢所有的帮助。我对tbody一无所知 - 不知道哪些浏览器会这样做。似乎很疯狂，要处理一个不存在的标签。 - user210757

:first现在已经被弃用。https://api.jquery.com/first-selector/ - Ben in CA

Answer 2

试试这个：

.not(':first').not(':last')

- mikkelz

Answer 3

为什么不只是这样呢？

$('table tr:not(:first-child):not(:last-child)');

这也可以作为纯CSS选择器。

- ProblemsOfSumit

Answer 4

您可以通过用逗号分隔选择器来将 .not() 方法合并成一个：

$('#id tr').not(':first, :last');
$('#id tr:not(:first, :last');

请注意，第二个在纯CSS中无效，仅作为jQuery选择器。对于纯CSS，您必须使用@Sumit的答案。

- Katrina

Answer 5

你也可以使用 .slice() 方法 来从集合中移除第一个/最后一个元素：

$('table tr').slice(1, -1);

.slice() 方法 可以创建一个新的 jQuery 对象，该对象包含了初始集合中指定子集的元素。在本例中，它将排除索引为 1 和 -1 的元素，分别是第一个和最后一个元素。

示例：

$('table tr').slice(1, -1).css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

当然，你也可以使用:not()来否定:first-child/:last-child：

$('table tr:not(:first-child):not(:last-child)').css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

您还可以结合使用:nth-child(n+2)和:nth-last-child(n+2):

$('table tr:nth-child(n+2):nth-last-child(n+2)').css('background-color', '#f00');

table { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr><tr><td>2</td></tr>
  <tr><td>3</td></tr><tr><td>4</td></tr>
  <tr><td>5</td></tr><tr><td>6</td></tr>
</table>

- Josh Crozier

---

对我来说很有效！似乎比其他人提出的更容易使用。 - Johan

Answer 6

奇怪的是，这些建议并没有起作用，它们都应该能够起作用！但是...如果还是没用，尝试以下方法...虽然速度稍慢，但必定有效！！尝试:

$('table#tbl tr').addClass('highlight');
$('table#tbl tr:first-child').removeClass('highlight');
$('table#tbl tr:last-child').removeClass('highlight');

- Stuart G