Question

我正在尝试实现一个基本的jQuery无限轮播。对于学习过程和其他任何事情一样多（作为一项规则，我不是重新发明轮子的粉丝，但是......我必须以某种方式学习，不妨从基础知识开始）。

我已经设法让列表足够快乐地留下动画，但是当我选择列表的第一个元素时我就陷入了困境。我试过用：

$('ul#services > li:first');
$('ul#services > li:first-child');
$('ul#services > li').eq([0]);

（下面的xhtml），

在每种情况下，console.log(first)（使用的var名称）都会返回所有列表项。我是公然做某事，显然是错的吗？

最终计划是克隆第一个li，将其附加到父ul，从列表中删除li并允许列表无限滚动。它只是一个服务列表而不是链接，所以我不是 - 当下计划有滚动或左/右功能。

当前xhtml：

（编辑以添加整个当前代码/ html ）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <!--[if IE 8]>

        <link rel="stylesheet" type="text/css" href="css/ie8.css" />

    <![endif]-->

    <!--[if lte IE 7]>

        <link rel="stylesheet" type="text/css" href="css/ie7.css" />

    <![endif]-->

    <style type="text/css" media="screen">
ul#services {overflow: visible; }
    </style>

    <script type="text/javascript" src="js/jquery.js"></script>


    <script type="text/javascript">

        $(document).ready(

            function() {

                $(document).ready(function() {

                    $('h1 > span.businessName').each(
                            function() {
                                var text = $(this).html();
                                var first_letter = text.substr(0,1);

                                if ( /[a-zA-Z]/.test(first_letter) ) {
                                    $(this).html('<span class="firstLetter">' + first_letter + '</span>' + text.slice(1));
                                }
                            }
                    ); 
            });

                $('ul#services > li').filter(':odd').addClass('odd');
                $('ul#services > li').filter(':visible:last').addClass('last');

//--> Function starts

        jQuery.fn.carousel = function() {
            // 1. find the width of the list items:

                var listWidth = $('ul#services > li').outerWidth();

            // 2a. find the current first item:

                var curFirst = $('ul#services > li').first();

                console.log(curFirst);

            // 2b. append the current first item:

            // 2c. remove the first item 

            // 3. animate the list, to move left by listWidth:

                $('ul#services > li').delay(500).css('position','relative').animate(
                    {
                    left: '-=' + listWidth
                    },
                    5000,
                        function() {

    //                      $('ul#services').get(0).remove();
                            $('ul#services').delay(500).carousel()
                        }
                );
            };
//--> Function ends.
            $('ul#services').carousel();

            }
        )

    </script>


</head>

<body>

    <div id="pageWrap">

        <div id="branding">

            <h1><span class="businessName">business name</span> <span class="tagline">some other info</span></h1>
            <hr id="rule">

        </div>

        <div id="content">

<div class="carousel">

    <div class="wrapper">

        <ul id="services">
            <li>one</li
            ><li>two</li
            ><li>three</li
            ><li>four</li
            ><li>five</li
            ><li>six</li
            ><li>seven</li
            ><li>eight</li
            ><li>nine</li
            ><li>ten</li>
        </ul>

    </div>

        </div>

        <div id="mainPane">
<p>Lorem ipsum dolor sit amet...</p>
        </div>

        <div id="sidebar">

            <div id="contact">
    <!--
        STARTS hCARD (below)
    -->
                <div id="hcard">
                    <div id="hcard-yy-xx" class="vcard">
                        <span class="fn"><span class="given-name">YY</span> <span class="family-name">XX</span></span>
                        <div class="org">business name</div>
                        <a class="email" href="mailto:xx@xx.com">email</a>

                            <div class="tel">

                            </div>
                            <a class="downloadAs" href="http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=http://www.davidrhysthomas.co.uk/arch/tester.html">Download contact information</a>
                    </div>
                </div>
    <!--
        ENDS hCARD (above)
    -->
            </div>

            <div id="professionalBodies">

                <ul>
                    <li>some stuff</li>
                </ul>

            </div>

        </div>

    </div>

        <div class="push"></div>

    </div>

        <div id="footer">


        </div>

</body>

</html>

更新了，以回应Nick Craver的回答：

......我相信你想：$('ul#services li:first').remove(); ...你可能想要的是像$('ul#services > li:first').delay(500)...
这样的东西

使用$('ul#services li:first').remove();生成错误：

未捕获的TypeError：对象＃没有方法'remove'

与使用$('ul#services > li:first').delay(500)...

的行为似乎没有区别

Answer 1

既然你正在学习它，我不会在这里做所有的修正，但这里有一些要点：

这是错误的：$('ul#services').get(0).remove();
我相信你想：$('ul#services li:first').remove();

这是您所看到的主要原因：$('ul#services > li').delay(500)... 这会在孩子<li>的每个上启动动画，你看到的是10 console.log，因为你开的10次轮播，每个<li> 1次。< / p>

你可能想要的是像$('ul#services > li:first').delay(500)...

这样的东西

所有这些都有意义吗？我不确定你想要的最终结果，只是试图解释你当前的行为。

Answer 2

http://api.jquery.com/first-selector/

$('ul#services li:first)

是正确的，您的问题必须在其他地方，请尝试.first()？

如何让jQuery找到第一个列表项，而不是所有列表项？

2 个答案: