Question

尝试使用jQuery重新排列h3标签的顺序。对于每个h3标签，我们在扩展h3时都有div标签。所以，这里可以重新排列h3标签，但不能重新排列它的sibbling，即div标签。

任何人都可以建议我对我的剧本或任何其他方法进行任何更改。

以下是我的示例：

<script>
$("#mainDivId").accordion();
function dragAndDrop(){
    jQuery('#mainDivId').sortable({
        update : function(event, ui) {
            var x = ui['item'].parent().children().map(function() {             
                return $(this).attr("index");               
            }).get().join(",");

        }
    }); 

}
jQuery(function() {
    dragAndDrop();  
});
</script>

<div id="mainDivId">
<h3 index="0">
    h3-0
</h3>
<div index="0">
    div-0
</div>
<h3 index="1">
    h3-1
</h3>
<div index="1">
    div-1
</div>
<h3 index="2">
    h3-2
</h3>
<div index="2">
    div-2
</div>
<h3 index="3">
    h3-3
</h3>
<div index="3">
    div-3
</div>
<h3 index="4">
    h3-4
</h3>
<div index="4">
    div-4
</div>
</div>

Answer 1

您可以为所有h3和div对添加包装器。上面代码中发生的事情是只有h3元素被拖动而在其原始位置留下相应的内容。以下是工作示例： http://jsfiddle.net/javedsaifi/wtoqa412/

$(function() {
    $("#mainDivId").accordion({
        header: "> div > h3"
    }).sortable({
        axis: "y",
        handle: "h3",
        stop: function(event, ui) {
            ui.item.children("h3").triggerHandler("focusout");
            $(this).accordion("refresh");
        }
    });
});
<div id="mainDivId">
    <div class="group">
         <h3 index="0"> h3-0 </h3>
        <div index="0">div-0</div>
    </div>
    <div class="group">
         <h3 index="1"> h3-1 </h3>
        <div index="1">div-1</div>
    </div>
    <div class="group">
         <h3 index="2"> h3-2 </h3>
        <div index="2">div-2</div>
    </div>
    <div class="group">
         <h3 index="3"> h3-3 </h3>
        <div index="3">div-3</div>
    </div>
    <div class="group">
         <h3 index="4"> h3-4 </h3>
        <div index="4">div-4</div>
    </div>
</div>

Answer 2

如果dom自动生成，那么你也可以添加包装div格式jquery。这是工作小提琴：http://jsfiddle.net/javedsaifi/3Lfj40om/

$(function(){
    $('#mainDivId > h3').each(function () {
        $(this).next().andSelf().wrapAll('<div class="group">');
    });
    $("#mainDivId").accordion({
        header: "> div > h3"
    }).sortable({
        axis: "y",
        handle: "h3",
        stop: function (event, ui) {
            ui.item.children("h3").triggerHandler("focusout");
            $(this).accordion("refresh");
        }
    });        
});
<div id="mainDivId">
  <h3 index="0"> h3-0 </h3>
  <div index="0"> div-0</div>
  <h3 index="1"> h3-1 </h3>
  <div index="1"> div-1 </div>
  <h3 index="2"> h3-2 </h3>
  <div index="2"> div-2 </div>
  <h3 index="3"> h3-3 </h3>
  <div index="3"> div-3 </div>
  <h3 index="4"> h3-4 </h3>
  <div index="4"> div-4 </div>
</div>

如何使用jQuery重新排序或重新排列h3标签

2 个答案: