如何next（）直到没有其他项目，然后返回所列项目的原始状态

Question

I am almost there with the script I am writing, but once I reach the end of the list, I need a way to know that I have reached the end and that next button needs to take me back to the list and add .itemBox and itemHeader classes back to their respective elements. 我正在编写的脚本几乎都在那儿，但是一旦到达列表的末尾，我就需要一种方法知道自己已经到达末尾，并且下一个按钮需要将我带回到列表并添加.itemBox和itemHeader类返回到其各自的元素。 Here is the code I have so far: 这是我到目前为止的代码：

<code>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>var itemText = $('div.itemDescription').children().not('h3');
        //hide item text when page loads.
        itemText.hide();
        //set all div.itemDescriptions to have Aria-expanded attribute set to false.
        var itemDivs = $('div.itemDescription');
        for(i=0;i<itemDivs.length;i++)
        {
            $(itemDivs[i]).attr("aria-expanded",false);
        }
        var resetBox = itemDivs;
        //when user clicks link, have the benefit text appear if hidden and hide if shown.
        $('h3.itemHeader').click(function(){
            var theDiv = $(this).closest('div.itemDescription');
            var itemContent = theDiv.children().not('h3');
            itemContent.show();
            $(this).addClass('expanded');

            //when expanded, set ARIA expanded to true; Set to FALSE when not expanded.
            if($(this).hasClass('expanded'))
            {
                $(this).parent().attr("aria-expanded",true);
                //remove class from h3
                $(this).removeClass('itemHeader');
                //unbind to stop further clicks on h3
                //$(this).unbind('click');
                theDiv.parent().removeClass('itemBox');
                theDiv.prevAll().hide();
                theDiv.nextAll().hide();

            }
            else if ($(this).hasClass('expanded')==false)
            {
                $(this).parent().attr("aria-expanded",false);
                $(this).removeClass('expanded');

            }
        })//end click.

        // next button functionality
        $('a.btn-next').click(function(){


            //hide current div
            $(this).parents('div.itemDescription').hide();

            //assign variable to next header and show
            var nextItem = $(this).parents('div.itemDescription').next();


                nextItem.show();
                //expand contents of next div
                nextItem.attr("aria-expanded",true);
                nextItem.children('h3').removeClass('itemHeader');

                nextItem.children().show();

        })//end next click

        $('a.btn-prev').click(function(){

            //hide current div
            $(this).parents('div.itemDescription').hide();

            //assign variable to next header and show
            var prevItem = $(this).parents('div.itemDescription').prev();
            prevItem.show();

            //expand contents of next div
            prevItem.attr("aria-expanded",true);
            prevItem.children('h3').removeClass('itemHeader');

            prevItem.children().show();

        })//end prev click
</script>
<style>
.itemBox {
    border: 1px solid #333;
    padding: 2em;
}
.itemHeader {
    color: blue;
    text-decoration: underline
}
</style>

</head>
<body>
<div class="itemBox">
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 1</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 2</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 3</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 4</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
<div class="itemDescription">
    <h3 class="itemHeader" tabindex="0">Header 5</h3>
    <div class="itemText">
        Text
        <a href="#" class="btn-prev">Previous</a>
        <a href="#" class="btn-next">Next</a>
    </div><!-- /.itemText -->
</div>
</div><!-- /.itemBox -->
</body>
</html>
</code>

Answer 1

The trick is if there is a next() or not 诀窍是是否存在next（）

This should work 这应该工作

    var nextItem = $(this).parents('div.itemDescription').next();
    /* if no length it doesn't exist*/
    if( ! nextItem.length ) {
        nextItem=$(this).parents('div.itemDescription:first')
    }

Not part of issue but this loop is not needed 不是问题的一部分，但不需要此循环

  var itemDivs = $('div.itemDescription');
    for(i=0;i<itemDivs.length;i++)
    {
        $(itemDivs[i]).attr("aria-expanded",false);
    }

jQuery will handle same thing with: jQuery将通过以下方式处理相同的事情：

 var itemDivs = $('div.itemDescription').attr("aria-expanded",false);

如何next（）直到没有其他项目，然后返回所列项目的原始状态

问题描述

1 个解决方案

解决方案1
0 2012-03-26 19:09:04

如何next（）直到没有其他项目，然后返回所列项目的原始状态

问题描述

1 个解决方案

解决方案1 0 2012-03-26 19:09:04

解决方案1
0 2012-03-26 19:09:04