`element.next（）。insertBefore（element）`做了什麼？

我一定錯過了一件非常簡單的事情，但我不確定它到底是什麼。`element.next（）。insertBefore（element）`做了什麼？

從this answer我們有代碼：

app.directive('createTable', function ($compile) { 
    return { 
     link: function(scope, element, attrs) { 
      if (element.next().length) { 
       element.next().insertBefore(element); 
      } 

      var contentTr = angular.element('<tr><td>test</td></tr>'); 
      contentTr.insertAfter(element); 
      $compile(contentTr)(scope); 
     } 
    } 
});

的目標是ng-repeat僞指令中的每一個元素後插入一些東西。

這部分是做什麼的？

  if (element.next().length) { 
       element.next().insertBefore(element); 
      }

我看這是：「如果有一個元素，X，element後，再X之前堅持element」。但似乎情況已經如此。

它清楚地做一些事情，因爲如果我刪除這些三線，所有的元素被添加到tbody末，而不是被穿插..見jsfiddle of the working version和the jsfiddle when it's commented out。

來源

2015-11-06 Claudiu

.next()：

獲取緊隨其後的各元素的同級的集合中的匹配的元素。如果提供了選擇器，則只有在匹配該選擇器時纔會檢索下一個兄弟。

insertBefore()：

插入該集合中的目標之前，匹配元素的每一個元素。

因此，$element.next().insertBefore($element)交換$element與其下面的兄弟姐妹。

來源

2015-11-06 19:22:59 Oriol

我可能不會正確解析這個。 'X'永遠不會在'X.next（）'之前？ 'element'在這種情況下總是一個元素。 – Claudiu

哦，哈哈，我明白了。我誤解了'X.insertBefore（Y）'在'X'之前粘貼'Y'，而在'Y'之前粘貼'X'。 – Claudiu

它接下一個元素並將其重新定位在當前元素之前。這裏有一個演示：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Demo</title> 
    <meta charset="utf-8"> 
    <style> 
     #div1 { background-color: gray; } 
     #div2 { background-color: red; } 
     #div3 { background-color: blue; } 
     #div4 { background-color: green; } 
    </style> 
    </head> 
    <body> 

    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
    <div id="div3">Div 3</div> 
    <div id="div4">Div 4</div> 

    <button id="btn">Rearrange</button> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script> 
     $('#btn').on('click', function(e){ 
     var element = $('#div1'); 
     if (element.next().length) { 
      element.next().insertBefore(element); 
     } 
     }); 
    </script> 

    </body> 
</html>

來源

2015-11-06 19:29:58 MarkPlewis

`element.next（）。insertBefore（element）`做了什麼？

回答

相關問題