JSFiddle - React, Tailwind, and code Playground
HTML
<button id="prev" disabled>prev</button>
<button id="next">next</button>
<ul id="js-tree-wrapper">
<li><a href="#" class="jstree-search jstree-glow">Item</a></li>
<li><a href="#" class="jstree-search">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li>
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#" class="jstree-search">Item</a></li>
<li><a href="#" class="jstree-search">Item</a></li>
<li><ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#" class="jstree-search">Item</a></li>
<li><a href="#" class="jstree-search">Item</a></li></ul>
</li>
</ul>
</li><li><a href="#" class="jstree-search">Item</a></li>
<li><a href="#" class="jstree-search">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
CSS
ul {padding-left: 20px}
.jstree-search { font-weight:bold; }
.jstree-glow { background: #ccc; border:#666 1px solid; }
JavaScript
(function ($)
{
var classSelected = 'jstree-glow',
$allEls = $('.jstree-search'),
$prevBtn = $("#prev"),
$nextBtn = $("#next");
function moveDown()
{
var $el = $('.' + classSelected),
pos = $allEls.index($el);
if (pos < $allEls.length - 1) {
move($el, $allEls.eq(pos + 1), pos + 1);
}
}
function moveUp()
{
var $el = $('.' + classSelected),
pos = $allEls.index($el);
if (pos > 0) {
move($el, $allEls.eq(pos - 1), pos - 1);
}
}
function move($from, $to, newPos)
{
$from.toggleClass(classSelected, false);
$to.toggleClass(classSelected, true);
$prevBtn.attr('disabled', newPos == 0);
$nextBtn.attr('disabled', newPos == $allEls.length - 1);
}
$(document).ready(function () {
$prevBtn.on('click', function () {moveUp();});
$nextBtn.on('click', function () {moveDown();});
});
}(jQuery));