JQuery查找()具有深度限制的两个相互独立的列表

Question

我在另一个复杂的div列表中有一个复杂的div列表(使用类搜索)，需要一个全局的方法，或者将这两个列表作为单独的列表。

例如代码：

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

我首先搜索所有的“.缩放-手风琴”，因为：

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

然后，我想翻遍每一个手风琴，抓住所有的行，而不是像孩子一样抓取里面的行：

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

问题是，查询返回第二个手风琴的内部子行。我尝试过使用.Children()，但这不起作用，因为对于不同的手风琴，行、手风琴和排序处于不同的深度。另外，类名是不同的和随机的，这取决于我正在处理的列表。我做的每一个手风琴都需要密码。但是，我确实知道，行的最大深度应该是4-6分支，永远不应该更深。我需要一种方法来抓取缩放-Accordian和它的行，而不是从内部缩放-Accordian的行。

使用当前的搜索，我的手风琴(例如只有5行)正在拾取内部行如下：

​

如果我尝试使用.Children()方法搜索一个分支，它不能工作，因为每个手风琴可以有不同的深度、不同的id和类等等。如果我尝试使用.not()方法忽略双深度分支，它也不能工作，因为我仍然想要更深的手风琴，就像一个不同的列表一样。产出：

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

是：

​

​

我需要一种方法来指定深度，我想限制和抓取第一个手风琴与5行作为1手风琴，然后手风琴在每一行作为另外5个单独的手风琴。有没有可能用来搜索特定深度的插件？

如果这件事太复杂或者太让人困惑的话，很抱歉。我会尽力回答任何问题。我只需要一个通用用例非常具体的东西。

谢谢

编辑:我的手风琴的一个具体例子是：

<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

最后，我从这篇文章(depth of a child in the 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;
}

然后检查这个行在缩放类的上下文中是否太深，如下所示：

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