遍历无序列表时跳过第一个列表项。 jQuery答案

【问题标题】：Skip first list item while iterating over the unordered list. JQuery遍历无序列表时跳过第一个列表项。 jQuery
【发布时间】：2011-12-11 11:16:43
【问题描述】：

我有一个无序列表，其中列表项包含指向图像的链接。我的代码当前遍历列表项，获取 href，在 div banner-holder 中创建一个新的图像容器并添加 src 属性。

我想做的是跳过第一个列表项，因为我已经在 banner-holder 中拥有该图像并且我不想添加它两次。

谢谢。

$('li').each(function ()
    {
        var bigImage = $(this).find('a.main-img').attr('href');

        $('<img/>').attr('src', bigImage).appendTo('#banner-holder');

    });

【问题讨论】：

标签： jquery image function html-lists

【解决方案1】：

$('ul li').not(':first-child').each(function ()
    {
        var bigImage = $(this).find('a.main-img').attr('href');

        $('<img/>').attr('src', bigImage).appendTo('#banner-holder');

    });

【讨论】：

天哪，甚至没有想过：first-child。有点有趣，一段时间以来一直使用该 css3 选择器和 selectivizr，并且一直在与它的 IE 问题作斗争！非常感谢，真的帮了我大忙！
是的， :first-child 被 jquery 覆盖，可以在旧版本的 IE 中工作。如果您只是使用 css，要绕过它，您必须合并一个 selectivizr.js 文件，它允许用户使用 css3 选择器，从而使旧版本的 IE 表现得像 IE9。在这里可以找到 selectivizr 文件selectivizr.com
我就是这么想的。听起来你在 jq 中遇到了问题，而不是在 css 中，这就是我问的原因。我认为modernizr 为我们做到了这一点。
我使用modernizr 有一段时间了，但意识到它真正所做的只是在标题中列出当前浏览器支持的html5 类。过去的 IE 真的没有帮助我。问题是当 JavaScript 被禁用时，在过去版本的 IE 中显示的网站开始看起来很糟糕，因为 6-8 在没有 JavaScript 帮助的情况下不会呈现 css3 和 html5。

【解决方案2】：

jQuery each method 传递当前项目的索引，因此您可以使用它：

$('li').each(function (index)
{
    if (index > 0) { 
        var bigImage = $(this).find('a.main-img').attr('href');

        $('<img/>').attr('src', bigImage).appendTo('#banner-holder');
    }
});

或者，您可以使用gt selector：

$('li:gt(0)').each(function() {
    ...
});

当前的jQuery documentation 有这个关于gt 选择器的注释：

因为 :gt() 是一个 jQuery 扩展而不是 CSS 的一部分规范，使用 :gt() 的查询不能利用本机 DOM querySelectorAll() 提供的性能提升方法。为了在现代浏览器中获得更好的性能，请使用 $("your-pure-css-selector").slice(index) 代替。

【讨论】：

【解决方案3】：

  $('li:not(:first-child)').each(function ()
    {
     var bigImage = $(this).find('a.main-img').attr('href');

      $('<img/>').attr('src', bigImage).appendTo('#banner-holder');

  });

我没有对此进行测试，但我认为它会起作用。

【讨论】：