我有一个嵌套的导航列表(如下所示),其中每个链接指向最终构成整个页面的页面序列中的一个页面。使用jQuery,我想在每个页面上自动生成“prev/next”链接。这样,用户按顺序阅读所有文章,只需单击jQuery生成的“Next”链接,而无需使用嵌套导航定位自己。分组嵌套元素
<ul id="sidemenu">
<li>Heading 1
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="navselected"><a href="#">Link 4</a></li>
</ul>
</li>
<li>Heading 2
<ul>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</li>
</ul>
<div id="contentinner">
<p>The article content in here...</p>
</div>
在以前的尝试,在得到这个使用下面的jQuery(的jsfiddle这里:http://jsfiddle.net/LrHV8/)工作,我只能遍历一个特定的嵌套<ul>
内的DOM,而不能向上移动,遍历所有<a>
在#sidemenu
$(document).ready(function(){
var currNavItem = $('#sidemenu .navselected');
var nextNavItem = currNavItem.next('li');
var prevNavItem = currNavItem.prev('li');
var nextNavText = nextNavItem.find('a').text();
var prevNavText = prevNavItem.find('a').text();
var nextNavLink = nextNavItem.find('a').attr('href');
var prevNavLink = prevNavItem.find('a').attr('href');
var prevLinkTitle = "Previous Article";
if (prevNavText == ""){
prevLinkTitle = "";
}
var nextLinkTitle = "Next Article";
if (nextNavText == ""){
nextLinkTitle = "";
}
var nextPrevNav = '<div class="prevnext"><span class="prevarticle">'+prevLinkTitle+'<br /><a href="'+prevNavLink+'">'+prevNavText+'</a></span><span class="nextarticle">'+nextLinkTitle+'<br /><a href="'+nextNavLink+'">'+nextNavText+'</a></span></div>';
$('#contentinner').prepend(nextPrevNav);
$('#contentinner').append(nextPrevNav);
});
我怎么组的所有#sidemenu a
在一个“平”的对象,找到.navselected
和提供的#sidemenu
方面作为一个整体为一个和下一个选项?
换句话说,如果(在这个例子中)Link 4
选择我怎样才能创建Prev = Link3/Next = Link 5
代替Prev = Link 3/Next = [BLANK]
编辑
感谢您的帮助,大卫Fregoli和j08691。在你的建议和jQuery的网站,我想出了这个解决方案,我认为其中,阅读后,从每个答案博采众长位,同时仍然保持它的可读性我相当经验的眼睛:
$(document).ready(function(){
var $allItms = $('#sidemenu ul li'),
$currPos = $allItms.index($('.navselected')),
$prevTtl="",$prevLnk="",$prevTxt="",$nextTtl="",$nextLnk="",$nextTxt="";
if ($currPos > 0){
var $prevTtl = "Previous Article",
$prevAnc = $allItms.eq($currPos-1).find('a'),
$prevLnk = $prevAnc.attr('href'),
$prevTxt = $prevAnc.text();
}
if ($currPos < $allItms.length-1){
var $nextTtl = "Next Article",
$nextAnc = $allItms.eq($currPos+1).find('a'),
$nextLnk = $nextAnc.attr('href'),
$nextTxt = $nextAnc.text();
}
var $nextPrevNav = '<div class="prevnext"><span class="prevarticle">'+$prevTtl+'<br /><a href="'+$prevLnk+'">'+$prevTxt+'</a></span><span class="nextarticle">'+$nextTtl+'<br /><a href="'+$nextLnk+'">'+$nextTxt+'</a></span></div>';
$('#contentinner').prepend($nextPrevNav);
$('#contentinner').append($nextPrevNav);
});
,并不意味着它是一个好主意为此使用jQuery。应该在服务器上生成下一个/上一个链接,并与组成页面的HTML的其余部分一起发送。 – Adam 2013-05-10 16:26:03
一个有效的观点,亚当,但在这种情况下,由于一些与最初问题无关的因素,这并不是真的可行 - 但主要是因为它是对现有静态网站的改进。我对99%的访问者启用了JavaScript这一事实抱着平心静气的态度,所以实际上,这不是在这里,也不在于是否完成了服务器端或客户端。 – Doug 2013-05-10 17:26:34