Wie man jQuery zu finden, die erste Liste-Element, eher als alle list-items?

Ich versuche, die Implementierung eines basic jQuery infinite carousel. Als wesentlich für den Lernprozess als etwas anderes (als in der Regel ich bin kein fan von re-inventing Räder, aber...ich muss lernen, irgendwie, vielleicht auch mit den Grundlagen beginnen).

Habe ich es geschafft die Liste zu animieren linken glücklich genug, aber ich bin stecken, wenn es um die Auswahl des ersten Elements in der Liste. Ich habe versucht, zu verwenden:

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

xhtml(unten),

In jedem Fall eine console.log(first) (die var name) gibt alle von der Liste-Elemente. Mache ich etwas eklatant und offensichtlich falsch?

Den eventuellen plan-ist-Klon der ersten li, hängen Sie an das übergeordnete ul entfernen Sie die li aus der Liste und lassen Sie die Liste zu scrollen unendlich. Es ist nur eine Liste von Dienstleistungen, die eher als links, so bin ich nicht-im moment - Planung haben, scrollen oder Links - /rechts-Funktionen.

Aktuellen xhtml:

(bearbeitet, um hinzufügen die Gesamtheit der aktuellen Quellcode/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  type="text/css" href="css/ie8.css" />

    <![endif]-->

    <!--[if lte IE 7]>

        <link  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:[email protected]">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>

Aktualisiert, in Reaktion auf Nick Craver ' s Antwort:

...Ich glaube Sie wollen: $('ul#services li:first').remove();
...Was Sie wahrscheinlich wollen, dass es so etwas wie $('ul#services > li:first').delay(500)...

Mit $('ul#services li:first').remove(); generiert den Fehler:

Uncaught TypeError: Object # hat keine Methode 'entfernen'

und es scheint keinen Unterschied im Verhalten von mit $('ul#services > li:first').delay(500)...

Wo sind Sie Einstellung Sie zuerst? Die Selektoren sind richtig, ich vermute, das Problem ist außerhalb, können Sie nach dem code, wo Sie beim festlegen/verwenden?
Und ich hatte gehofft, verbergen meine -ehrlich gesagt - grauenhaft Verbrechen gegen die jQuery... =) Jup, werde ich nach der Funktion, die ich versuche zu nutzen/benutzen. Gib mir ein paar Sekunden...
können Sie den vollständigen code? könnte es etwas gibt, das uns helfen kann.
Craver, @NickLarson: getan.

InformationsquelleAutor David Thomas | 2010-03-26

9

Da man es lernt, ich werde nicht alles tun, die Korrekturen hier, aber hier sind die wichtigsten Punkte:

Dies ist erroring: $('ul#services').get(0).remove();

Ich glaube Sie wollen: $('ul#services li:first').remove();

Dies ist der wichtigste Grund für das, was Sie sehen: $('ul#services > li').delay(500)...
Dies startet die animation auf jeder des Kindes <li> und was Sie sehen, ist, 10-Konsole.melden weil Sie Auftakt-Karussell, 10-mal, 1 für jede <li>.

Was Sie wahrscheinlich wollen, dass es so etwas wie $('ul#services > li:first').delay(500)...

Alle, die Sinn machen? Ich bin mir nicht ganz sicher, was Sie wollen das Endergebnis zu sein, nur versuchen zu erklären, Ihre aktuelle Verhalten.

Ah! Ich hatte Sie abgeholt auf der remove() Fehler, Dank Google ' s Konsole. ...Animation Problem noch nicht aufgetreten zu mir. Danke! Ich gehe davon aus , dass ich brauchen würde, um zu animieren, die ul eher als der Nachkomme lis (ich habe meine Fehler in meinem Kommentar, aber die Bearbeitung zu beachten Sie, dass ich Sie erwischt habe Ihren Vorschlag zu re-animieren $('ul#services > li:first')` vielen Dank wieder? +1
Ich bin mir nicht ganz sicher, was Sie wollen, das Ergebnis ist, so schwer zu sagen, Sie wollen, dass Sie, um nach oben oder...?
Navigieren Sie nach Links. Im Idealfall versuche ich den Klon des ersten list-element, fügen Sie ihn der Liste und entfernen Sie dann die geklonten-element. Spülen und wiederholen,...
Übrigens, mit $('ul#services').get(0).remove() generiert den Fehler: "Uncaught TypeError: Object #<ein HTMLUListElement> hat keine Methode "entfernen"," in der Chrome-Konsole.
Check this out, mehr was Sie wollen? jsfiddle.net/an3St/2

InformationsquelleAutor Nick Craver
4

http://api.jquery.com/first-selector/
```
$('ul#services li:first)
```
ist richtig, dein problem muss woanders sein, versuchen .first() ?

Sieht gut aus für mich jsbin.com/ixusa/edit
Vorausgesetzt, Sie meinte var first = $('ul#services > li').first() ich kann nur sagen, dass es nicht funktioniert.
Das funktionierte für mich. jsbin.com/ixusa/3/edit

InformationsquelleAutor Alex

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.