jQuery select ul li items with next prev buttons -


i'm trying select li element prev next buttons, using code: http://jsfiddle.net/kzyay/41/ if keep clicking next/prev keeps going out of ul element. idea how select inside ul ? thanks!

here fiddle: http://jsfiddle.net/kzyay/41/

<ul class='selected' id=""> <li id="">1</li> <li id="">2</li> <li id="">3</li> </ul> <div>current tag:<span id="current-tag"></span></div> <button id="prev">previous</button> <button id="next">next</button> 

js:

(function($) {     $.fn.domnext = function() {         return             .children(":eq(0)")             .add(this.next())             .add(this.parents().filter(function() {                 return $(this).next().length > 0;             }).next()).first();             };      $.fn.domprevious = function() {         return             .prev().find("*:last")                .add(this.parent())                  .add(this.prev())             .last();              }; })(jquery);  $("#next").click(function() {     var $next, $selected = $(".selected");      $selected.removeclass("selected");     $next = $selected.domnext().addclass("selected");     if ($next.length) {         $("#current-tag").text($next.attr('class'));     } });  $("#prev").click(function() {     var $prev, $selected = $(".selected");     $selected.removeclass("selected");     $prev = $selected.domprevious().addclass("selected");     if ($prev.length) {         $("#current-tag").text($prev.get(0).tagname);     }  }); 

not sure plugin.. surely overkill simple.

but write up

var $first = $('li:first', 'ul'); var $last = $('li:last', 'ul');  // have first , last li's set variable $("#next").click(function () {      var $next;     var $selected = $(".selected");     // selected item     // if next li empty , first     $next = $selected.next('li').length ? $selected.next('li') : $first;     $selected.removeclass("selected");     $next.addclass('selected'); });  $("#prev").click(function () {     var $prev,         $selected = $(".selected");     // selected item     // if prev li empty , last     $prev = $selected.prev('li').length ? $selected.prev('li') : $last;     $selected.removeclass("selected");     $prev.addclass('selected'); }); 

check fiddle


Comments

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -