JQuery find () с ограничением по глубине два отдельных списка внутри друг друга

Question

У меня есть сложный список div (с использованием поиска по классам) внутри другого сложного списка div, и мне нужен глобальный способ или захватить эти два списка как отдельные списки.

Код EG:

<div id="ServicesAccordian" class="scaling-Accordian">
    <div class="row">
        <div class="ACCPriority-3">
            something
        </div
        <div class="ACCPriority-3">
            something
        </div
        <div class="ACCPriority-3">
            <div id="ServicesAccordian" class="scaling-Accordian">
                <div class="row">
                    <div class="ACCPriority-3">
                        something at second depth
                    </div
                    <div class="ACCPriority-3">
                        something at second depth
                    </div
                    <div class="ACCPriority-3">
                        something at second depth
                    </div
                </div>
            </div>
        </div
    </div>
</div>

Сначала я ищу все '.scaling-Accordians' следующим образом:

this.AllAccordians = $('.scaling-Accordian');

Затем я хочу go через каждый аккордеон и захватить все строки, не захватывая внутренние строки как дети:

this.AllRows = $(this.ACCORDIAN).find('[class^="row"], [class*=" row"]');

Проблема в том, что запрос возвращает внутренние дочерние строки для второго Аккордеона. Я пытался использовать .Children (), но это не работает, потому что строки, аккордеоны и упорядочение находятся на разной глубине для разных аккордеонов. Плюс имена классов разные и случайные в зависимости от списка, над которым я работаю. Код должен работать для каждого аккордеона, который я делаю. Тем не менее, я знаю, что максимальная глубина строк должна составлять 4-6 ветвей и никогда не должна быть глубже. Мне нужен способ получить масштабирующий аккордеон и его строки, не захватывая строки из внутреннего масштабирующего аккордеона.

При текущем поиске мой аккордеон, например, только с 5 строками, выбирает внутренние строки как так:

И если я попытаюсь использовать метод .Children () для поиска в одной ветви, он не будет работать, потому что каждый аккордеон может иметь разную глубину, разные id и классы и др. c. И если я попытаюсь использовать метод .not () для игнорирования ветвей двойной глубины, он также не будет работать, потому что я все еще хочу более глубокий аккордеон, как и другой список. Вывод для:

$(this.ACCORDIAN).find('[class^="row"], [class*=" row"]').not('.scaling-Accordian [class^="row"], [class*=" row"] .scaling-Accordian [class^="row"], [class*=" row"]');

:

Мне нужен способ указать глубину, которую я хочу ограничить и захватить первый аккордеон с 5 рядами как 1 аккордеон, а затем аккордеоны внутри каждого из этих рядов как еще 5 отдельных аккордеонов. Есть ли какой-нибудь плагин для поиска определенных c глубин?

Извините, если это слишком сложно или слишком запутанно. Я постараюсь ответить на любые вопросы. Мне просто нужно что-то очень конкретное c для общего случая использования.

Спасибо

РЕДАКТИРОВАТЬ: Конкретный c пример моих аккордеонов:

<div id="ServicesAccordian" class="Scaling-Accordion">
    <!--RENDER: Card Body Accordian - ALL SERVICES-->
    <!--Item Card-->
    <div id="CardToHide4">
        <!--Item Card-->
        <div class="card">
            <!--Card Title-->
            <div class="card-header" id="heading_1">
                <div class="row collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false" aria-controls="collapse_1">
                    <!--Card Title - Title Section-->
                    <div class="col-1 ACCPriority-3 text-center">
                        <span class="far fa-caret-square-down"></span>
                    </div>
                    <!--Card Title - Category Name-->
                    <div class="col-10 ACCPriority-1">
                        NAME
                    </div>
                    <!--Card Title - Total Price-->
                    <div class="col-1 ACCPriority-2 text-success text-right">
                        <span class="badge badge-pill badge-success">
                                    $987.00
                                </span>
                    </div>
                </div>
            </div>
            <!--Card/Item - Body-->
            <div id="collapse_1" class="collapse" aria-labelledby="heading_1" data-parent="#ServicesAccordian">
                <div class="card-body">
                    <!--Card Body Columns-->
                    <div class="col-md-12">
                        <!--Entire Form-->
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <!--Products Accordian-->
                                <div class="Scaling-Accordion">
                                    <div class="row">

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

В результате я обнаружил в этом посте действительно хорошую функцию проверки глубины ( глубина дочернего элемента в DOM ):

function depth(parent, descendant) {
    var depth = 0;
    var el = $(descendant);
    var p = $(parent)[0];
    while (el[0] != p) {
        depth++;
        el = el.parent();
    }
    return depth;
}

И затем проверил, была ли строка слишком глубоко в контексте класса Scaling-Accordion как:

this.AllRows = $(this.ACCORDIAN).find('.row');
//Remove deep rows
for (var i = 0, ROW; ROW = this.AllRows[i++];) {
    var isToDeep = (depth(this.ACCORDIAN, ROW) > 5);
    if (isToDeep) {
        this.AllRows.splice(i - 1, 1);
    }
}

Это работает довольно хорошо, и вы можете установить любой предел глубины с помощью этого.

Answer 2

Вы можете добавить функцию .not() в jQuery, которая изменяет исходный полученный набор результатов, чтобы не включать в него все, что соответствует селектору в not().

Другими словами, вы можете указать, $('.scaling-Accordian').not('.scaling-Accordian .scaling-Accordian').

Буквально, что будет читаться как «Выберите все элементы с классом« scaling-Accordian », но не включать элементы которые соответствуют классу 'scaling-Accordian', которые являются потомками другого элемента с классом 'scaling-Accordian' '

Таким образом, вы говорите jQuery не включать элементы, где этот класс вложен в себя .

Упрощенный пример HTML:

<div class="accordian">
  <div class="anotherClass">
    <div class="accordian inner-accordian">
    </div>
  </div>
</div>

JavaScript:

console.log('Matches: ', $('.accordian').length);  //Matches: 2
console.log('Matches: ', $('.accordian').not('.accordian .accordian').length);  //Matches: 1