在五个元素节点中。如何向左向右移动元素节点的位置？

Question

<li>
    <img src="" alt="">
       <i class="left-button"> 左边按钮
       <i class="right-button">右边按钮
    </li>
<li>
<img src="" alt="">
       <i class="left-button"> 左边按钮
       <i class="right-button">右边按钮
       </li>
<li>
    <img src="" alt="">
       <i class="left-button"> 左边按钮
       <i class="right-button">右边按钮
    </li>
<li>
<img src="" alt="">
       <i class="left-button"> 左边按钮
       <i class="right-button">右边按钮
</li>
<li>
<img src="" alt="">
       <i class="left-button"> 左边按钮
       <i class="right-button">右边按钮
</li>

是按钮交换相邻的位置。

在五个元素节点中。如何交两个元素节点的位置？
用什么jquery方法？

我是在百度搜不到答案，然后在技术群问话，人家只是告诉我原理。但具体方法都不说。
我迷糊了，自己研究又何时年月。没有老师的指点。