查找两个元素的第一个共享父元素

pau*_*aul 9 javascript jquery

假设我有这个DOM结构

<body>
    <p>
        Hello
        <i>how <b>are</b> you</i>
        and
        <i>what <b>are <tt>you</tt> going</b> to</i>
        eat tonight?
    </p>
</body>
Run Code Online (Sandbox Code Playgroud)

使用jQuery我想了解FIRST的共享父代

<b>are</b>
Run Code Online (Sandbox Code Playgroud)

<tt>you</tt>
Run Code Online (Sandbox Code Playgroud)

从下到上,这将是<p>而不是<body>标签.

关于如何使用jQuery确定第一个共享父级的任何想法?

SLa*_*aks 9

像这样:

$(a).parents().filter(function() { return jQuery.contains(this, b); }).first();
Run Code Online (Sandbox Code Playgroud)

如果b是选择器(而不是DOM元素),您可以将其更改为:

$(a).closest(':has(b)');
Run Code Online (Sandbox Code Playgroud)

这个更短,但速度要慢得多.

顺序ab无关; 如果b更接近父母,它会更快.


Nic*_*ver 5

你可以结合.parents()使用.filter(),像这样:

$("b:first").parents().filter($("tt").parents()).first()
//or more generic:
$(elem1).parents().filter($(elem2).parents()).first()
Run Code Online (Sandbox Code Playgroud)

这将获得所有共享父母,然后您可以采取.first().last()...无论需要什么.

你可以在这里测试一下.请注意,这比.has()我们只是比较2个DOM元素集要快得多,而不是递归地比较多个元素集.此外,所得的集将在订单涨的文件,在这个例子中<p>,然后<body>.