Как получить / сохранить элементы ng-repeat в jQuery

Question

Внутри 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. Я тоже не знаю, как определить длину родителя.

Я хочу иметь доступ ко всем дочерним элементам от родителя, например, циклически проходить через родительский элемент и выполнять операции над дочерними элементами. Чтобы они были в списке / массиве / объекте или что-то в этом роде.

В моем конкретном случае, чтобы изменить их порядок с вертикали один под другим, чтобы расположить их один рядом с другим по горизонтали. Это возможно?

Answer 1

для нахождения общей длины, тогда вы можете использовать .length только с помощью селектора-потомка, например:

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

Если вам нужно использовать .children (), то это выглядит так:

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

Answer 2

Я предполагаю, что вы новичок в angularjs, но раньше уже использовали jQuery. Angularjs использует jQuery (или, когда он не включен в страницу, определенное небольшое подмножество) «за кулисами», и если вы пытаетесь написать код angularjs в хорошей форме, вам следует когда-либо использовать jQuery только при написании пользовательских angularjs directives. Это конструкция угловатая, поэтому никакие манипуляции с 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>