Javascript 'element.next（）.insertBefore（element）`做什么？_Javascript_Jquery_Html_Angularjs_Dom

Javascript 'element.next（）.insertBefore（element）`做什么？

javascript jquery html angularjs dom

Javascript 'element.next（）.insertBefore（element）`做什么？,javascript,jquery,html,angularjs,dom,Javascript,Jquery,Html,Angularjs,Dom,我一定错过了一些非常简单的东西，但我还不确定它是什么从中我们得到了代码： app.directive('createTable', function ($compile) { return { link: function(scope, element, attrs) { if (element.next().length) { element.next().insertBefore(element);

我一定错过了一些非常简单的东西，但我还不确定它是什么

从中我们得到了代码：

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

我这样理解：“如果有一个元素，

，在

element

之后，然后在

之前粘贴

element

”。然而，情况似乎已经如此

它显然起到了作用，因为如果我删除这三行，所有元素都会添加到

tbody

的末尾，而不是分散在一起。。请参阅和。

：

获取集合中每个元素紧跟其后的同级匹配元素。如果提供了选择器，它将检索下一个仅当它与该选择器匹配时才为同级

在目标之前插入匹配元素集中的每个元素

因此，

$element.next（）.insertBefore（$element）

将

$element

与其以下同级交换。

它将获取下一个元素并将其重新定位到当前元素之前。下面是一个演示：

<!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>


演示
#div1{背景色：灰色；}
#div2{背景色：红色；}
#div3{背景色：蓝色；}
#div4{背景色：绿色；}
第一组
第2组
第3组
第4组
重新安排
$（'#btn'）。在（'click'，函数（e）上{
变量元素=$（'#div1'）；
if（element.next（）.length）{
element.next（）.insertBefore（element）；
}
});

我可能没有正确解析此内容。难道

不总是在

X.next（）之前吗<代码>元素

在这种情况下总是一个元素。噢，哈哈，我明白了。我把

X.insertBefore（Y）

误解为在

之前粘贴

，而不是在

之前粘贴

。

<!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>