venil7 · December 24, 2013 19:43
diff --git a/gistfile1.txt b/gistfile1.txt
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>list</title>
  <style>
    .stoppable {
      background-color: gray;
    }

    .selected {
      background-color: blue;
    }

  </style>
 </head>
 <body>
  <ul class="list">
    <li class="stoppable">item 1</li>
    <li class="stoppable ">item 2</li>
    <li class="stoppable">item 3</li>
    <li class="stoppable">item 4</li>
    <li class="stoppable">item 5</li>
    <li class="stoppable">item 6</li>
  </ul>
  <button class='add'>add</button>
  <button class='remove'>remove</button>

  <script src="./jquery-2.0.3.min.js"></script>
  <script>
    $(function() {
      var move = function(dir) {
        var list = $('.stoppable');
        var idx = list.filter('.selected').index();
        var count = list.size();
        if (dir == 'down')  {
          idx = idx -1;
          if (idx < 0) {
            idx = count -1;
          }
        } else if (dir == 'up') {
          idx = idx + 1;
          if (idx >= count) {
            idx = 0;
          }
        }
        list.filter('.selected').removeClass('selected');
        list.eq(idx).addClass('selected');
      };

      $('.add').click(function(){
        var list = $('.list');
        list.find('.selected').removeClass('selected');
        list.append('<li class=stoppable>item X</li>');
      });

      // console.log(selectedIndex);
      $(document).on('keyup', function(e) {
        switch (e.which) {
          case 40:
            move('up');
            break;
          case 38:
            move('down');
            break;
          default: return;
          e.preventDefault();
        }
      });
    });
  </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>list</title>
	<style>
	.stoppable {
	background-color: gray;
	}

	.selected {
	background-color: blue;
	}

	</style>
	</head>
	<body>
	<ul class="list">
	<li class="stoppable">item 1</li>
	<li class="stoppable ">item 2</li>
	<li class="stoppable">item 3</li>
	<li class="stoppable">item 4</li>
	<li class="stoppable">item 5</li>
	<li class="stoppable">item 6</li>
	</ul>
	<button class='add'>add</button>
	<button class='remove'>remove</button>

	<script src="./jquery-2.0.3.min.js"></script>
	<script>
	$(function() {
	var move = function(dir) {
	var list = $('.stoppable');
	var idx = list.filter('.selected').index();
	var count = list.size();
	if (dir == 'down') {
	idx = idx -1;
	if (idx < 0) {
	idx = count -1;
	}
	} else if (dir == 'up') {
	idx = idx + 1;
	if (idx >= count) {
	idx = 0;
	}
	}
	list.filter('.selected').removeClass('selected');
	list.eq(idx).addClass('selected');
	};

	$('.add').click(function(){
	var list = $('.list');
	list.find('.selected').removeClass('selected');
	list.append('<li class=stoppable>item X</li>');
	});

	// console.log(selectedIndex);
	$(document).on('keyup', function(e) {
	switch (e.which) {
	case 40:
	move('up');
	break;
	case 38:
	move('down');
	break;
	default: return;
	e.preventDefault();
	}
	});
	});
	</script>
	</body>
	</html>