Question

我必须遗漏一些非常简单的东西，但我不确定它到底是什么。

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

我将其读作：＆＃34;如果在X之后有element元素，则在element＆＃34;之前粘贴X。但似乎情况已经如此。

它显然有所作为，因为如果我删除这三行，所有元素都会添加到tbody的末尾，而不是散布。请参阅jsfiddle of the working version和{{3} }。

Answer 1

.next()：

获取该组中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个选择器兄弟姐妹只有匹配那个选择器。

insertBefore()：

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

因此，$element.next().insertBefore($element)将$element与其后续兄弟交换。

Answer 2

它接受下一个元素并在当前元素之前重新定位它。这是一个演示：

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

`element.next（）。insertBefore（element）`做什么？

2 个答案: