如何使用jQuery获取HTML中的下一个连续相似标签

Question

I have something like following code in HTML which is generated from some of plugins.

<div class="parent">
  <span>item1</span>
  <input type="hidden"></input>
  <span>item2</span>
  <span class="active">item3</span>
  <input type="hidden"></input>
  <input type="hidden"></input>
  <span>item5</span>
  <input type="hidden"></input>
  <span>item6</span>
  <input type="hidden"></input>
</div>

I have at top "move up" and "move down" button and by click on it will move span either up or down.

Now what i want, from any of the selected/active span I need next span tag. when i am using $(this).next() then it give me hidden input, when I use $(this).next("span") then it not give me next span.

so what should be jquery snippet to get from selected span i can get either next or previous similar tag (eg. span in my case)?

Update: This is the Jquery code I am using

$('.btn-move-up').click(function () {
       var $current = $('.parent > span.active');       
       var $prev = $current.prev();    
            $prev.before($current);
        });
$('.btn-move-down').click(function () {
     var $current = $('.parent > span.active');                       
     var $next = $current.next();
     $next.after($current);         
});

Thanks

Answer 1

next() and prev() alone won't work given your HTML structure as the span elements are not always direct siblings.

To fix this you can use nextAll('span').first() and prevAll('span').first() :

 $('.btn-move-up').click(function() { var $current = $('.parent > span.active'); var $prev = $current.prevAll('span').first(); $prev.before($current); }); $('.btn-move-down').click(function() { var $current = $('.parent > span.active'); var $next = $current.nextAll('span').first(); $next.after($current); }); 

 .active { color: #C00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <span>item1</span> <input type="hidden" /> <span>item2</span> <span class="active">item3</span> <input type="hidden" /> <input type="hidden" /> <span>item5</span> <input type="hidden" /> <span>item6</span> <input type="hidden" /> </div> <button class="btn-move-up">Up</button> <button class="btn-move-down">Down</button>