Jquery 如何下一步（）直到没有其他项，然后返回到列出的项的原始状态
我写的脚本已经差不多完成了，但是一旦我到达列表的末尾，我需要一种方法来知道我已经到达了末尾，下一步按钮需要将我带回列表，并将.itemBox和itemHeader类添加回它们各自的元素。以下是我目前掌握的代码：Jquery 如何下一步（）直到没有其他项，然后返回到列出的项的原始状态,jquery,Jquery,我写的脚本已经差不多完成了，但是一旦我到达列表的末尾，我需要一种方法来知道我已经到达了末尾，下一步按钮需要将我带回列表，并将.itemBox和itemHeader类添加回它们各自的元素。以下是我目前掌握的代码： <code> <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <scr
<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>
var itemText=$（'div.itemsdescription'）.children（）.not（'h3'）；
//页面加载时隐藏项目文本。
hide（）；
//将所有div.itemsdescriptions设置为将Aria expanded属性设置为false。
var itemDivs=$（'div.itemDescription'）；
对于（i=0；i
诀窍在于是否存在下一个（）
这应该行得通
var nextItem = $(this).parents('div.itemDescription').next();
/* if no length it doesn't exist*/
if( ! nextItem.length ) {
nextItem=$(this).parents('div.itemDescription:first')
}
不是问题的一部分，但不需要此循环
var itemDivs = $('div.itemDescription');
for(i=0;i<itemDivs.length;i++)
{
$(itemDivs[i]).attr("aria-expanded",false);
}
你的问题到底是什么？你只是想得到调试脚本的帮助吗？通常你会提前确定列表中的项目数，并在这种情况下使用一些简单的if/then逻辑。非常感谢！使用你的建议修改以下内容非常有效：
var itemDivs = $('div.itemDescription').attr("aria-expanded",false);