寻找深度最小的元素

debugcn 发表于 Dev

克里斯

我有这样的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>

这是关于自动生成的布局。现在，我想处理一条路径之类的特定元素，但忽略它们之间的所有“包装”要素。

例如：

center/center 应该屈服 #five
center/west 应该屈服 #three
center/west/center 应该屈服 #four

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

$('.center .center')但是，而不是返回#five它返回[#four, #five]，这当然是正确的此选择器，但不是我想要的。

$('.center > .center')这个返回#five是我想要的，但是当我尝试将相同形式的选择器应用于这样的（2.）或（3.）时：$('.center > .west')由于.wrap介于两者之间的元素，它不会返回任何内容。

对于一个简单的问题，有那么长的解释。有没有办法得到像这样的东西：

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

GNi33

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中向下遍历一层并返回匹配的元素，您甚至可以将选择器传递给它，以在同一步骤中过滤元素，但是我认为这种方式更加清晰。

该elements变量定义“起点”，通过了第一个参数是选择器，该函数查找。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。