jQuery - 综合实例 - 实现前一个和后一个效果

[示例代码]

<html>
    <head>
        <script src="jquery-1.2.js"></script>
        <script>
            $(document).ready (
                function () {
                    $("#previous").click (
                        function () {
                            var current;
                            $("#items .item").each(
                                function (index, element) {
                                    if ("red" === $(element).css("color")) {
                                        current = index;
                                    }
                                }
                            );
                            $("#items .item").each(
                                function (index, element) {
                                    if (index === current - 1) {
                                        $($("#items .item")[current]).css("color", "");
                                        $(element).css("color", "red");
                                    }
                                }
                            );
                        }
                    );
                }
            );
            $(document).ready (
                function () {
                    $("#next").click (
                        function () {
                            var current;
                            $("#items .item").each(
                                function (index, element) {
                                    if ("red" === $(element).css("color")) {
                                        current = index;
                                    }
                                }
                            );
                            $("#items .item").each(
                                function (index, element) {
                                    if (index === current + 1) {
                                        $($("#items .item")[current]).css("color", "");
                                        $(element).css("color", "red");
                                    }
                                }
                            );
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <div id="items">
            <div class="item" style="color: red;">
                1
            </div>
            <div class="item">
                2
            </div>
            <div class="item">
                3
            </div>
            <div class="item">
                4
            </div>
            <div class="item">
                5
            </div>
            <div class="item">
                6
            </div>
            <div class="item">
                7
            </div>
            <div class="item">
                8
            </div>
            <div class="item">
                9
            </div>
            <div class="item">
                10
            </div>
        </div>
        <button id="previous">
            previous
        </button>
        <button id="next">
            next
        </button>
    </body>
</html>