Why don't you just do it like: $('#prev').css('cursor','pointer').click(function(){ $('.page:visible').hide().prev().show(); }
Same with next. $('#next').css('cursor','pointer').click(function(){ $('.page:visible').hide().next().show(); } You will pro On Feb 26, 5:43 pm, Doug C <lietmo...@gmail.com> wrote: > I wrote this jquery to basically dynamically build a paging control > for long articles, etc.... > I have it dynamically generating a UL, a page selector and a drop > down > selector and I just need to write a piece that will do a <-Prev and > Next -> and my brain is having trouble with it. Here is the code in > simplified form. I also don't have the coding for the contect > highlighting done yet to show what page we are on. > > HTML: > <div id="headerUL"><!--UL goes here--></div> > <div id="page1" class="page" title="Section 1">This is Page 1</div> > <div id="page2" class="page" title="Section 2">This is Page 2</div> > <div id="page3" class="page" title="Section 3">This is Page 3</div> > <div id="page4" class="page" title="Section 4">This is Page 4</div> > <div id="prev"><!--This will be the Prev Link--></div> > <div id="PageNum"><!-- Page Numbers 1, 2, 3, 4--></div> > <div id="next"><!--This will be the Next Link--></div> > <div id="DropDown"><!--Drop down box--></div> > Here is the Jquery I have that generates it. I just need some help > getting Prev and Next done. > <script> > $(document).ready(function(){ > //Prestate > $(".page:not(:first)").hide(); > $(".page:first").show(); > //Let's get the # of pages. > var numPages = $(".page").length; > var pageNums= ""; > var prev = "", next=""; > var i = 1; > var lister = "<UL id=pageUL>"; > var selector = "<select id=pageSelect>"; > $(".page").each(function(i) { > pageNums+= "<a href=# id="+this.id+" class=pageids>"+(i+1)+",</ > a> " > lister+="<LI><a href=# class=pageLI>"+$("#"+this.id).attr('title') > +"</ > a></LI>" > selector+="<option class=pageSE value="+$("#"+this.id).attr('title') > +">"+$("#"+this.id).attr('title')+"</option>" > > }); > > lister+="</UL>"; > selector+="</select>"; > //Add the Click events > $(".pageids").live("click", function(){ > $("#"+this.id).show(); > $(".page:not(#"+this.id+")").hide(); > > }); > > $(".pageLI").live("click",function(){ > var ht = $(this).html() > $(".page").hide(); > $("DIV[title='"+ht+"']").show(); > }); > $(".pageSE").live('click',function(){ > var ht = $(this).text(); > $(".page").hide(); > $("DIV[title='"+ht+"']").show(); > }); > //Set the values > $("#PageNum").html(pageNums); > $("#headerUL").html(lister); > $("#DropDown").html(selector); > > }); > > </script> > Thanks in advance.