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>

这是关于自动生成的布局。现在我想对路径中的特定元素进行处理，但忽略其间的所有“包裹”元素。

例如：

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

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中的一个级别并返回匹配的元素，您甚至可以将选择器传递给它以在同一步骤中过滤元素，但我认为这个例子更清晰。

elements变量定义“起始点”，传递的第一个参数是函数查找的选择器。

请注意，这是一个快速示例，向您展示这背后的想法，这可以打磨和优化。

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的第一个元素，它将使用2个新参数调用自身。

找到具有最低深度的元素

2 个答案: