Question

我在<li>中有三个<ul id="accordion">个标签。我现在想通过jQuery选择各种项目。

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

要选择上一个<li>项，$("#accordion li:last")有效

如何通过jQuery选择器选择中间<li>元素？我可以在这里使用:middle伪类。

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

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

进一步阅读：

Answer 3

在此模式下，您可以计算元素数量。

例如你有这个：

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

您可以使用length来计算lis

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

之后通过此代码找到中间长度

ln = ln / 2;

然后使用jquery的eq函数来选择像这样的中间项

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

但是不要忘记使用eq从0开始编制索引。我希望我的回答可以帮助你:)。

Answer 4

选择第二个元素的另一种方法是使用adjacent sibling selector +：

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

这是一个演示。

＆＃13;

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

＆＃13;

.selected {color: red;}

＆＃13;

<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>

＆＃13;

这里也是任意数量的li元素（不仅仅是3）的通用解决方案：

＆＃13;

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

＆＃13;

.selected {color: red;}

＆＃13;

<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>

＆＃13;

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

4 个答案: