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'); });
Comments
Post a Comment