如何选择三个元素中的中间一个？

Question

我在一个 <ul id="accordion"> 中有三个 <li> 标签。现在我想通过 jQuery 选择这些不同的项。

要选择第一个 <li>，我们可以使用 $("#accordion li:first")。

要选择最后一个 <li>，可以使用 $("#accordion li:last")。

如何通过 jQuery 选择中间的 <li> 元素？这里没有 :middle 伪类可用。

- user29762

---

尝试阅读文档：请参阅http://api.jquery.com/eq/和http://api.jquery.com/eq-selector/。 - j08691

Answer 1

您可以将两个“:not”选择器组合在一起，以获取所有“不是第一个和不是最后一个”的元素，如下所示： HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

Javascript

$('li:not(:first-child):not(:last-child)').css('color', 'red');

此外，检查一下 JsFiddle。

- Ronen Cypis

Answer 2

没有:middle选择器，这是有道理的——当我们有4个项目时，哪个元素会被匹配呢？ 但是，您可以通过它们的索引访问元素。使用CSS Level 3选择器，您可以使用:nth-child(…)伪类：

#accordion li:nth-child(2)

:nth-child 伪类还可以选择元素的重复模式，例如所有偶数或奇数孩子。

此外，jQuery 还提供了非标准的索引伪类 :eq(…)，在这种情况下您应该使用它。

$("#accordion li:eq(1)")  // zero-based indexing

进一步阅读：

• :nth-child在 MDN 上的 CSS 文档
• :nth-child jQuery 文档
• :eq jQuery 文档

- amon

Answer 3

在这个模式下，您可以计算元素的数量。

例如，您有以下内容：

<ul id="someId">
     <li>t1</li>
     <li>t2</li>
     <li>t1</li>
</ul>

您可以使用length来计算列表中的项目数。

var ln =$("#someId li").length;

之后通过以下代码找到长度的中间部分

ln = ln / 2;

然后使用jQuery的eq函数来选择中间项，就像这样。

$("#someId li:eq("+ln+")").css("border","1px solid red");

但是不要忘记使用从0开始的eq进行索引。 我希望我的回答能帮到你 :)

- Behzad Hassani

---

jQuery还有一个eq方法。因此，我们可以更清晰地编写该示例，如下：var $items = $("#someId li"); $items.eq($items.length / 2).css("border","1px solid red"); - amon

当然，伙计。但是我的解释是教育性的和业余的。 - Behzad Hassani

Answer 4

选择第二个元素的另一种方法是使用相邻兄弟选择器+：

$("#accordion li:first + li")

这是一个演示。

$("#accordion li:first + li").addClass('selected');

.selected {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

这里还有一个通用的解决方案，适用于任意数量的 li 元素（不仅限于 3 个）：

$('#accordion li ~ li:not(:last)').addClass('selected');

.selected {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

- dfsq

---

这并没有回答他的问题。 - Ronen Cypis

是的，它可以：“我有三个<li>标签”和“如何选择中间的<li>？” - dfsq