jQuery 如何选择不是 .first() 或 .last() 的元素

Posted 2023-05-09

【中文标题】jQuery 如何选择不是 .first() 或 .last() 的元素

【英文标题】：jQuery how to select elements not being .first() or .last()

【发布时间】：2012-07-10 22:45:40

【问题描述】：

我有这个代码

        <ul>
            <li><a href="index.php">Web Development</a></li>
                <span data-landing_count="1">
                    <li class="subli"><a href="1.html">E-shop</a></li>
                    <li class="subli"><a href="2.html">Prezentations</a></li>
                    <li class="subli"><a href="3.html">Custom CMS</a></li>
                    <li class="subli"><a href="4.html">WordPress & Joomla!</a></li>
                    <li class="subli"><a href="5.html">Web apps</a></li>
                    <li class="subli lastsl"><a href="index-b.html">Design</a></li>
                </span>
            <li><a href="6.html">E-courses</a></li>
                <span data-landing_count="2">
                    <li class="subli"><a href="7.html">Design & Graphics</a></li>
                    <li class="subli lastsl"><a href="8.html">Web Development</a></li>
                </span>
            <li><a href="9.html">SEO</a></li>
                <span data-landing_count="3">
                    <li class="subli"><a href="91.html">On-page SEO</a></li>
                    <li class="subli"><a href="92.html">W3C validation</a></li>
                    <li class="subli"><a href="93.html">Linking</a></li>
                    <li class="subli lastsl"><a href="94.html"><img src="img/star.png"   class="star">Copywriting</a></li>
                </span>
            <li data-landing_count="4"><a href="95.html">Web hosting</a></li>
            <li data-landing_count="5"><a href="96.html"><img src="img/star.png"   class="star">Pricing</a></li>
            <li data-landing_count="6"><a href="97.html">Contact us</a></li>
        </ul>

有 3 个跨度，我现在可以使用 .first() 定位第一个跨度，使用 .last() 定位最后一个跨度。但是我如何瞄准中间的呢？

感谢回复

【问题讨论】：

一个 UL 只能有 LI 子级。因此，除非您想要混乱，否则您应该将 SPAN 移入 LI。此外，LI 只能包含在 UL 或 OL 中。

【参考方案1】：

你可以使用：

$('span').eq(1);

使用eq() 方法或选择器：

$('span:eq(1)');

或者：

$('span').slice(1,-1);

请注意，您的 HTML 无效：only 元素可以包装 li 元素是 ul 或 ol。

参考资料：

eq()。 :eq selector。 slice()。

【讨论】：

+1 -- .slice 是迄今为止最快的解决方案，恕我直言，也是最干净的。

【参考方案2】：

$('ul span').not(':first,:last');

jsFiddle Demo

请注意，您的 HTML 完全损坏。你应该先学习 HTML，因为这只会导致神秘的问题和被低估的 *** 问题。

li 只能是 ul 或 ol 的子代。此外，ul 和 ol 只能拥有 lis 作为他们的孩子。您不能按照自己的方式将spans 放在 HTML 中。

【参考方案3】：

您可以使用以下方法修复它：

.eq(1)

它应该可以工作。

如果你想获取所有元素，当你从第二个元素迭代到前结束元素时，你可以使用for；

【参考方案4】：

首先，您的 HTML 糟糕。不要将<span> 标签放在<li> 标签之间。只会以灾难告终。

其次，您是否以这些为目标以提供不同的样式？如果是这样，那么为什么不使用 css :first-child 和 :last-child 选择器。这样您就可以设置第一个和最后一个的样式，而不是介于两者之间的样式。

【讨论】：

+1 表示一般改进建议，尽管这不能回答问题...

@Christoph 是的，它没有回答这个问题，但根据我在这里的经验，很多人正在寻找错误的解决方案来解决他们的问题。 ;)

@TimBJames - 说这些话需要非常棒的经验！赞！！！

@Tim 这就是我投赞成票的原因；）不幸的是，很多人只是在寻找 c&p 解决方案。