2014-03-31 39 views
0

我有這個網站:與多個元素的jQuery的insertBefore

<div id="categories" class=""> 
    <div class="list-group"> 
     <a id="427" data-parent="{ParentId}" href="#" class="list-group-item"><i class="fa indent0 fa-caret-down"></i>Home</a> 
     <a id="482" data-parent="427" href="#" class="list-group-item"><i class="fa indent1 fa-caret-right"></i>Images</a> 
     <a id="486" data-parent="482" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>Png</a> 
     <a id="487" data-parent="482" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>Jpg</a> 
     <a id="488" data-parent="482" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>Bmp</a> 
     <a id="483" data-parent="427" href="#" class="list-group-item active"><i class="fa fa-caret-right indent1"></i>Documents</a> 
     <a id="489" data-parent="483" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>pdf</a> 
     <a id="490" data-parent="483" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>word</a> 
     <a id="492" data-parent="490" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent3"></i>1997-2000</a> 
     <a id="493" data-parent="490" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent3"></i>2010</a> 
     <a id="491" data-parent="483" href="#" class="list-group-item" style="display: none;"><i class="fa fa-caret-right indent2"></i>excel</a> 
     <a id="484" data-parent="427" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Videos</a> 
     <a id="485" data-parent="427" href="#" class="list-group-item"><i class="fa fa-caret-right indent1"></i>Audio</a> 
    </div> 
</div> 

,我想要做的是移動文件和孩子們之前的圖像。 我創造了這個功能:

function getChildren($element) { 
    var id = parseInt($element.attr("id")); 
    var $items = []; 

    $items.push($element); 

    $.each($categories.find("[data-parent=" + id + "]"), function (i, item) { 
     var $this = $(this); 
     var parentId = parseInt($this.data("parent")); 

     if (id === parentId) { 
      $.each(getChildren($this), function() { 
       $items.push($(this)); 
      }); 
     } 
    }); 

    return $items; 
} 

其正確得到孩子和目標元素。 在我的移動功能我有這段代碼:

$actionBar.on("click", ".btn-moveup", function (e) { 
    e.preventDefault(); 

    var $element = $categories.find(".active"); 

    if ($element.length === 1) { 
     var parentId = parseInt($element.data("parent")); 
     var currentId = parseInt($element.attr("id")); 
     var index = 0; 
     var $items = $("[data-parent=" + parentId + "]"); 

     $.each($items, function (i, item) { 
      var id = parseInt($(this).attr("id")); 
      if (currentId === id) { 
       index = i; 
      } 
     }); 

     $children = getChildren($element); 
     $children.insertBefore($items.get(index - 1)); 
    } 
}); 

,但是當我到達的insertBefore我得到一個錯誤對象[對象數組]有沒有方法「的insertBefore」。我瞭解錯誤,但我不知道如何解決它。 有沒有人有任何這方面的經驗,並知道如何解決它?

乾杯,

/r3plica

回答

0

沒關係,我做到了這樣的:

$actionBar.on("click", ".btn-moveup", function (e) { 
    e.preventDefault(); 

    var $element = $categories.find(".active"); 

    if ($element.length === 1) { 
     var parentId = parseInt($element.data("parent")); 
     var currentId = parseInt($element.attr("id")); 
     var index = 0; 
     var $items = $("[data-parent=" + parentId + "]"); 
     var $children = getChildren($element); 

     $.each($items, function (i, item) { 
      var id = parseInt($(this).attr("id")); 

      if (currentId === id) { 
       index = i; 
      } 
     }); 

     $.each($children, function() { 
      $(this).insertBefore($items.get(index - 1)); 
     }); 
    } 
});