javascript-使用jQuery和CSS选择器选择嵌套元素的公共父/祖先

我正在寻找多个嵌套元素的公共父元素,而我只知道其内部文本.

例如,在以下代码中：

<unknown>       
    <unknown class="unknown">
        ....
        <unknown>
            <unknown>Sometext</unknown>
        </unknown>
        <unknown>
            <unknown>Sometext</unknown>
        </unknown>
        <unknown>
            <unknown>Sometext</unknown>
        </unknown>
        ....
    </unknown>
</unknown>

我想获得在这种情况下具有未知类的最接近的元素(公共父元素).我不知道实际的标签或类名.我只知道nest元素包含“ Sometext”.我知道这可以通过使用jQuery / Javascript的循环来完成,但是有没有CSS选择器可以与jQuery一起使用呢？我尝试使用最近的(),parents(),parentsUntil()的组合,但是我似乎无法理解此元素.

谢谢！

解决方法:

首先,您需要确保仅匹配叶节点(没有子节点的节点),因此请使用：

:not(:has(*))

因此,要查找所有精确匹配(仅叶子节点),请使用：

var matches = $(':not(:has(*))').filter(function () {
    return $(this).text() == "Sometext";
});

或仅对所有元素使用组合过滤器(并添加了针对0个孩子的检查)：

var matches = $('*').filter(function () {
     return !$(this).children().length && $(this).text() == "Sometext";
});

注意：我尚未测试这两个选项中哪一个最快.

然后,您需要找到(所有匹配项的)第一个祖先,其中包含所有匹配项：

var commonparent = matches.first().parents().filter(function () {
    return $(this).find(matches).length == matches.length;
}).first();

JSFiddle：http://jsfiddle.net/TrueBlueAussie/v4gr1ykg/

根据David Thomas的建议,这是一对jQuery扩展(commonParents()和commonParent()),可能对人们将来有用：

要查找jQuery集合的所有公共父级,请使用`commonParents()’：

$.fn.commonParents = function (){
    var cachedThis = this;
    return cachedThis.first().parents().filter(function () {
        return $(this).find(cachedThis).length === cachedThis.length;
    });
};

JSFiddle ：(共同的父母)：http://jsfiddle.net/TrueBlueAussie/v4gr1ykg/3/

要查找jQuery集合的最接近的公共父级,请使用commonParent()：

$.fn.commonParent = function (){
    return $(this).commonParents().first();
};

JSFiddle：(共同的父母)：http://jsfiddle.net/TrueBlueAussie/v4gr1ykg/2/

笔记：

> jQuery优化了commonParent中first()与commonParents filter()的组合使用,并且仅在达到第一个匹配之前调用commonParents中的代码,因此无需提高commonParent的效率.

标签：dom-traversal,jquery-selectors,html,javascript,jquery
来源： https://codeday.me/bug/20191120/2047476.html