Efficient, concise way to find next matching sibling?

前端 未结 3 1170
你的背包
你的背包 2020-11-27 18:35

Sticking to the official jQuery API, is there a more concise, but not less efficient, way of finding the next sibling of an element that matches a given selector other than

3条回答
  •  有刺的猬
    2020-11-27 19:24

    Edit, Updated

    Utilizing Next Siblings Selector (“prev ~ siblings”)

    jQuery.fn.nextMatching = function nextMatchTest(selector) {
         return $("~ " + selector, this).first()
    };
    

    http://jsperf.com/jquery-next-loop-vs-nextall-first/10

    jQuery.fn.nextMatching = function nextMatchTest(selector) {
         return $("~ " + selector, this).first()
    };
       var nextFoo = $("div:first").nextMatchTest("div.foo");
       console.log(nextFoo)
    
    
    One
    Two
    Three
    Four
    Five
    Six
    Seven
    Eight


    Note, Not yet added to or tried at comparison test. Not certain if actually more efficient than .nextAll() implementation. Piece attempts to parse selector string argument having multiple comma-separated selector's . Returns .first() element of single or comma-separated selectors provided as argument , or this element if no selector argument provided to .nextMatchTest(). Appear to return same results at chrome 37 , ie11

    v2

    $.fn.nextMatching = function (selector) {
        var elem = /,/.test(selector) ? selector.split(",") : selector
        , sel = this.selector
        , ret = $.isArray(elem) ? elem.map(function (el) {
            return $(sel + " ~ " + $(el).selector).first()[0]
        }) : $(sel + " ~ " + elem).first();
        return selector ? $(ret) : this
    };
    

    $.fn.nextMatching = function (selector) {
        var elem = /,/.test(selector) ? selector.split(",") : selector
        , sel = this.selector
        , ret = $.isArray(elem) ? elem.map(function (el) {
            return $(sel + " ~ " + $(el).selector).first()[0]
        }) : $(sel + " ~ " + elem).first();
        return selector ? $(ret) : this
    };
    
    var div = $("div:first")
        , foo = div.nextMatching()
        , nextFoo = div.nextMatching("div.foo")
        , nextFooMultiple = div.nextMatching("div.foo, div.goo");
    nextFooMultiple.css("color", "green");
    nextFoo.css("color", "blue");
    console.log(foo);
    
    
    One
    Two
    Three
    Four
    Five
    Six
    Seven
    Eight

提交回复
热议问题