如何在 jQuery 中获取/存储 ng-repeat 的元素答案

【问题标题】：How to get/store the elements of a ng-repeat in jQuery如何在 jQuery 中获取/存储 ng-repeat 的元素
【发布时间】：2018-09-14 13:40:24
【问题描述】：

在 div 中有一个元素列表，它们显示为一个列表（一个在另一个之下），我想获取这些元素并将它们显示在同一行（一个靠近另一个）。

父母看起来像：

<div class="table-option table-option__items">
    <div ng-repeat="option in $ctrl.configuration" class = "table-option-item">
        <div class="table-option-header">   
            {{option.name}}
        </div>
    </div>
</div>

我可以通过

在控制台（也可以在 .js 文件中）访问它

var parent = $(".table-option__items")[0];

和每个孩子

var child = $(".table-option-item")[i]; , i 是它的索引。

在我的例子中，有 4 个孩子，所以我可以通过将 i 替换为 0、1、2 或 3 来访问它们。我也不知道如何获取父母的长度。

我希望能够从父级访问所有子级，例如遍历父级并能够对子级进行操作。将它们放在列表/数组/对象或类似的东西中。

在我的特殊情况下，将它们的顺序从垂直的一个在另一个下更改为将它们水平放置在另一个附近。这可能吗？

【问题讨论】：

你为什么需要这些？ ng-repeat 遍历一个数组，您应该通过该数组访问/操作 DOM。混合 Angular 和 jquery 是不好的。

标签： javascript jquery html angularjs

【解决方案1】：

我假设您是 angularjs 的初学者，但之前使用过 jQuery。 Angularjs 在“幕后”使用 jQuery（或者当页面中没有包含它时，它的一个特定的小子集），如果你正在尝试编写格式良好的 angularjs 代码，你应该只在编写自定义 angularjs 时自己使用 jQuery @ 987654321@。这是 Angular 的设计，因此不会将 DOM 操作与您的应用程序的业务逻辑混在一起。这是一个关于如何以更角度的方式重新调整 ng-repeat 循环的快速示例：

angular.module("app",[])
.controller("ctrl", function($scope){
  $scope.options = [{name: "foo"}, {name: "bar"}]
})

.quux{
  display: inline-block;
}
.thing{
  margin: 5px;
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
    <div class="quux" ng-repeat="option in options">
        <span class="thing">   
            {{option.name}}
        </span>
    </div>
</div>

【讨论】：

【解决方案2】：

然后求总长度你可以将 .length 与后代选择器一起使用，如下所示：

var count = $(".table-option-item").length;

如果一定要使用.children()，那么是这样的：

var count = $(".table-option div").children().length;
var length = $('.table-option__items').children('div').length

【讨论】：