标签：dom-traversal jquery-selectors html javascript jquery

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

例如,在以下代码中：

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。