jquery - 有没有可能我可以使用 jquery 将某个 html 标记转移到另一个位置？

Question

我这里有一个导航栏，旁边有一个插入符号。我想使用 jquery 动态地改变这个。单击时，激活的菜单转移到被单击的菜单。我想要发生的是我还想将箭头移动到导航栏中单击的菜单。我如何在 jquery 中做到这一点？

                         <div class = "side-nav-bar content">
                            <a class="active-menu" href="javascript:;">체육학</a><i class="arrow right"></i>
                            <a href="javascript:;">전공소개</a>
                            <a href="javascript:;">졸업 후 진로</a>
                            <a href="javascript:;">교육 프로그램</a>
                            <a href="javascript:;">교수소개</a>
                    </div>

                          $('.side-nav-bar a').click(function(){
            $('.side-nav-bar a').not(this).removeClass('active-menu');
            $(this).addClass('active-menu');
            $('arrow').insertAfter('active-menu');
    }); 

                          .arrow {
                        border: solid white;
                        border-width: 0 2px 2px 0;
                        display: inline-flex;
                        padding: 3px;
                        position: absolute;
                        top: 23px;
                        right: 10px;
                         }

                          .right {
                            transform: rotate(-45deg);
                            -webkit-transform: rotate(-45deg);
                            }

Answer 1

你几乎完成了 $('.arrow').insertAfter(this); 或者当你将 active-menu 类添加到被点击的 a 您还可以使用 $('.arrow').insertAfter(".active-menu");

$('.side-nav-bar a').click(function(e){
  e.preventDefault();
  $('.side-nav-bar a').not(this).removeClass('active-menu');
  $(this).addClass('active-menu');
  $('.arrow').insertAfter(this);
}); 

.arrow {
border: solid white;
border-width: 0 2px 2px 0;
display: inline-flex;
padding: 3px;
top: 23px;
right: 10px;
color : red;
background : red;
}

.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "side-nav-bar content">
  <a class="active-menu" href="javascript:;">체육학</a><i class="arrow right"></i>
  <a href="javascript:;">전공소개</a>
  <a href="javascript:;">졸업 후 진로</a>
  <a href="javascript:;">교육 프로그램</a>
  <a href="javascript:;">교수소개</a>
</div>