我可以使用 jQuery 在有序列表上切换“反转”吗？

如何解决我可以使用 jQuery 在有序列表上切换“反转”吗？

我正在处理十个<section>。

所有部分都有一个标题 <h1>，后跟一个有序列表 <ol>。

只有两个部分的标题中有一个 <span>sort</span>。

我希望使用那些 sort-span's 来切换（反转）这两个列表的顺序。

---

带有按字母升序排列的列表的部分：

<section>
    <h1>artists <span>sort</span></h1>
    <ol>
        <li>Hockney,David</li>
        <li>Matisse,Henri</li>
        <li>Picasso,Pablo</li>
    </ol>
</section>

艺术家

• 霍克尼，大卫
• 马蒂斯，亨利
• 毕加索、巴勃罗

---

具有按字母降序排列的“反向”列表的部分：

注意：我只是在 <ol> 有序列表中添加了“reversed”。

<section>
    <h1>artists <span>sort</span></h1>
    <ol reversed>
        <li>03. Hockney,David</li>
        <li>02. Matisse,Henri</li>
        <li>01. Picasso,Pablo</li>
    </ol>
</section>

艺术家

• 毕加索、巴勃罗
• 马蒂斯，亨利
• 霍克尼，大卫

---

我遇到的问题是弄清楚如何（使用 jQuery）将“反转”切换到 <ol>，因为它不是 .class 或 .id...>

由于我只对 jQuery 有基本的了解，老实说不知道从哪里开始，我希望在这里询问这是否可能，如果可能，如何最好地解决这个问题？

---

到目前为止，我已经掌握了这些，我是否在正确的轨道上？

$('section span').on('click',function(e) {
    e.preventDefault();
    $(this).closest('ol').toggle().append("reversed");
});

---

$('section span').on('click',function(e) {
    e.preventDefault();
    $(this).closest('ol').toggle().append("reversed");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <h1>artists <span>sort</span></h1>
    <ol>
        <li>Hockney,Pablo</li>
    </ol>
</section>

解决方法

添加了一个工作示例，如果 HTML 结构发生变化，请告诉我。

$('section span').on('click',function(e) {
   var OlObj = $(this).parent('h1').next('ol');
   OlObj.append( OlObj.find('li').get().reverse());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <h1>artists <span>sort</span></h1>
    <ol>
        <li>Hockney,David</li>
        <li>Matisse,Henri</li>
        <li>Picasso,Pablo</li>
    </ol>
</section>