查找深度最小的元素

Question

我有这样的 DOM 结构：

<div id="one" class="center">
    <div id="two" class="wrap">
        <div id="three" class="west">
            <div id="four" class="center"></div>
        </div>
        <div id="five" class="center"></div>
    </div>    
</div>

这是关于自动生成的布局。现在我想像路径一样处理特定元素，但忽略中间的所有 "wrap" 元素。

例如：

center/center 应该产生 #five
center/west 应该产生 #three
center/west/center 应该产生 #four

我尝试使用两个不同的选择器：

$('.center .center') 但不是 returning #five 它 returns [#four, #five] 这对于这个选择器当然是正确的但不是我想要的.

$('.center > .center') 这个 returns #five 这是我想要的但是当我尝试将相同形式的选择器应用于 (2.) 或 (3.) 时这：$('.center > .west') 它将 return 什么都没有，因为中间有 .wrap 元素。

对一个简单的问题进行如此长的解释。有没有办法得到类似的东西：

$('.center .center').lowestDepth()

Answer 1

jQuery 中并没有真正的内置函数来开箱即用， .closest - 方法有点类似，它只是遍历 DOM.

您可以做的是递归调用函数并过滤元素的直接子元素，直到找到最接近的元素。

我快速 jsFiddle 展示了这一点。

function lowestDepth(selector, elem){
    var childElements = elem.children();

    var filteredElements = childElements.filter(selector);

    if(filteredElements.length === 0){
       return lowestDepth(selector, childElements);
    } else {
       return filteredElements.eq(0);
    }
}


var elements = $('#one .west');
var ldelement = lowestDepth('.center', elements);

.children() 在 DOM 和 returns 匹配的元素中向下遍历一层，你甚至可以传递一个选择器给它来在同一步骤中过滤元素，但我认为这样的例子更清楚。

elements变量定义"starting point"，传递的第一个参数是函数查找的选择器。

请注意，这是一个向您展示背后想法的快速示例，可以对其进行完善和优化。

Answer 2

EDIT2：排序。

编辑：刚刚注意到它实际上并没有按照我预期的方式进行：D 将尝试改进和更新。

我想出了一个解决办法。它适用于当前结构，但尚未测试不同结构：

function findStuff(arg1, arg2, arg3) {
if ($('.' + arg1).children('.' + arg2).length == 0) {
    if ($('.' + arg1).children().first().attr('class') != arg2) {
        if(arg3 == null) {
            findStuff($('.' + arg1).children().first().attr('class'), arg2, null);
        } else {
            findStuff($('.' + arg1).children().first().attr('class'), arg2, arg3);
        }     
    }
} else {        
    if(arg3 != null) {
        findStuff(arg2, arg3, null); 
    } else {
        $('.' + arg1).children('.' + arg2).css('background-color', 'red'); 
    }
}
}
$(document).ready(function () {
findStuff("center", "center", null);
});

https://jsfiddle.net/vhs4c0cp/1/

首先它寻找前两组参数，如果有第三个参数，一旦找到与原始 arg1 和 arg2 匹配的第一个元素，它将用两个新参数调用自己。

查找深度最小的元素

Finding the element with the lowest depth

jquery

jquery-selectors