Как заставить jQuery найти первый элемент списка, а не все элементы списка? - PullRequest
Новая
       37

Как заставить jQuery найти первый элемент списка, а не все элементы списка?

2 голосов
/ 26 марта 2010

Я пытаюсь реализовать базовую бесконечную карусель 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>
<ч />

Обновлено в ответ на ответ Ника Крейвера:

... Я верю, что вы хотите: $('ul#services li:first').remove(); ... То, что вы, вероятно, хотите, есть что-то вроде $('ul#services > li:first').delay(500)...

Использование $('ul#services li:first').remove(); генерирует ошибку:

Uncaught TypeError: У Object # нет метода 'remove'

и, кажется, нет никакой разницы в поведении от использования $('ul#services > li:first').delay(500)...

Ответы [ 2 ]

9 голосов
/ 26 марта 2010

Поскольку вы изучаете это, я не буду делать все исправления здесь, но вот основные моменты:

Это ошибка: $('ul#services').get(0).remove();
Я верю, что вы хотите: $('ul#services li:first').remove();

Это главная причина того, что вы видите: $('ul#services > li').delay(500)... Это запустит анимацию каждого ребенка <li>, и вы увидите 10 console.log, потому что вы запускаете карусель 10 раз, по 1 для каждого <li>.

То, что вы, вероятно, хотите, есть что-то вроде $('ul#services > li:first').delay(500)...

Все это имеет смысл? Я не совсем уверен, что вы хотите, чтобы конечный результат был, просто пытаюсь объяснить ваше текущее поведение.

4 голосов
/ 26 марта 2010

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

$('ul#services li:first)

правильно, ваша проблема должна быть в другом месте, попробуйте .first()?

...