Question

我有plunker中显示的jQuery选项卡，我想编写一个函数来重新排序选项卡，这个函数可以重新排序除tab之外的其他元素，基本上我会传递这样的参数，它会拿两个论点

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。你需要使用insertBefore()并使用“[xe-for-section =”fragment-3“]” - 选择器

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);
    }
}

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

1 个答案: