javascript - jQuery中是否有一种方法可以从元素向上遍历dom树并在其父元素之前检查选择器

Question

例如：

<div class="mainWrapper">
    <div class="FirstLayer">
        <input class="foo" value="foo" />
    </div>

    <div class="SecondLayer">
        <div class="thirdLayer">
            <input class="fee" />
        </div>
    </div>
</div>

假设我有input.feejQuery 对象，我还需要获取input.foo. 现在我知道我可以使用多种方法，$(this).parents(':eq(2)').find('.foo')但我想在具有不同级别和节点数量的布局上使用这种方法。所以我想知道是否有一种方法可以简单地从开始.fee并一直向上直到找到第一个匹配元素，.prevAll()似乎没有这样做。有很多元素.foo，我特别需要上下文中.fee的第一个元素。.fee

Answer 1

这个怎么样：

$('input.fee').closest(':has("input.foo")')
              .find('input.foo').val();

这是JS Fiddle可以玩的。)

更新：对@VisioN 表示敬意——当然，parents:first它很好地被closest.

Answer 2

这将选择之前的 input.foo

// self might have siblings that are input.foo so include in selection
$( $("input.fee").parentsUntil(":has(input.foo)").andSelf()

        // if input.off is sibling of input.fee then nothing will
        // be returned from parentsUntil. This is the only time input.fee
        // will be selected by last(). Reverse makes sure self is at index 0
        .get().reverse() )

        // last => closest element
        .last()                 

        //fetch siblings that contain or are input.foo elements
        .prevAll(":has(input.foo), input.foo") 

        // first is closest
        .first() 

        // return jQuery object with all descendants
        .find("*")         

        // include Self in case it is an input.foo element 
        .andSelf() 

        .filter("input.foo")

        // return value of first matching element
        .val() 

Answer 3

jQuery.closest()接受选择器并完全按照您的需要 - 找到第一个匹配的元素，它是某物的父元素。还有jQuery.parents()确实采用选择器来过滤元素祖先。使用那些与方法相结合的find方法，你就设置好了。

$('input.fee').closest('.mainWrapper").find('.foo')有诀窍，不是吗？