如何以编程方式重新排序JQuery UI选项卡

Question

我有jQuery选项卡，如plunker所示，我想写一个函数来重新排序选项卡，这个函数也可以重新排序选项卡以外的其他元素，基本上我会像这样传递参数，它将接受两个参数

1)元素2) nextSibling:传入元素后的元素

function reorder(element, nextSibling){
    //I want to move the element here
}

那么，如何识别传递的元素是jQuery选项卡，以及如何重新排序。

请参阅plunkr链接以查看jQuery选项卡

这里我们遵循一个惯例，我们添加属性到标签内容'xe-section‘和相应的带有'xe-for-section’的标签标题中，这两个属性值将是相同的。

以下是代码片段

<div id="tabs">
  <ul>
    <li xe-for-section="fragment-1"><a href="#fragment-1"><span>One</span></a></li>
    <li xe-for-section="fragment-2"><a href="#fragment-2"><span>Two</span></a></li>
    <li xe-for-section="fragment-3"><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1" xe-section ="fragment-1">
    Tab 1
  </div> 
  <div id="fragment-2" xe-section="fragment-2">
    Tab 2
  </div>
  <div id="fragment-3" xe-section="fragment-3">
    Tab 3
  </div>
</div>

<script>
$( "#tabs" ).tabs();


function reorder(element, nextSibling){
//Example: element= fragment-2, nextSibling = fragment-1 

// I want to reorder tabs here    

}

</script>

Answer 1

参见this。您需要使用片段并使用“xe-for- insertBefore() =”fragment-3“”-selector

reorder($('[xe-for-section="fragment-3"]'), $('[xe-for-section="fragment-2"]'));

function reorder(element, nextSibling) {
    if(element.attr('role') === 'tab' && nextSibling.attr('role') === 'tab') {
        element.insertBefore(nextSibling);
    }
}