11

jquery のドキュメントにclosestは次のように書かれています。

.closest( selector [, context ] )
...
context
タイプ: Element
一致する要素が見つかる可能性がある DOM 要素。コンテキストが渡されない場合は、代わりに jQuery セットのコンテキストが使用されます。

私が理解しているように、太字のテキストは、2 つのステートメントが同等であることを意味します。

set.closest("a");

set.closest("a", set.context);

setjquery セットは どこにありますか。

ただし、そうではないようです。

var context = $("#inner")[0];
var set = $("#el", context);

// the set's context is correctly the "inner" element
set.text("context: " + set.context.id);

// if the set's context is used, this closest should match nothing, but it matches and sets the color
set.closest("#outer").css("color", "red");

// with the context explicitly set, the "outer" is not found and no background color is set
set.closest("#outer", set.context).css("background-color", "blue");
#outer{
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner">
    <div id="el"></div>
  </div>
</div>

ご覧のとおり、コンテキストが明示的に設定されていない場合、#outer要素が によって検出されるため、セットのコンテキストは使用されていないようですclosest。明示的に設定すると、#outerが正しく検出されません。

ドキュメントが間違っているだけですか、それとも何か不足していますか?

4

1 に答える 1

5

これは明らかにバグであり、意図した動作ではありません。

のソースclosest()は

function (selectors, context) {
    var cur, 
        i = 0,
        l = this.length,
        matched = [],
        pos = rneedsContext.test(selectors) || typeof selectors !== "string" 
           ? 
           jQuery(selectors, context || this.context) 
           : 
           0;

    for (; i < l; i++) {
        for (cur = this[i]; cur && cur !== context; cur = cur.parentNode) {
            // Always skip document fragments
            if (cur.nodeType < 11 && (pos ? pos.index(cur) > -1 :

            // Don't pass non-elements to Sizzle
            cur.nodeType === 1 && jQuery.find.matchesSelector(cur, selectors))) {

                matched.push(cur);
                break;
            }
        }
    }

    return this.pushStack(matched.length > 1 ? jQuery.unique(matched) : matched);
}

注目に値するのは、pos定義方法であり、最も近い親要素を検索するコレクションでrneedsContextあり、正規表現です

/^[\x20\t\r\n\f]*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\([\x20\t\r\n\f]*((?:-\d)?\d*)[\x20\t\r\n\f]*\)|)(?=[^-]|$)/i

渡されたセレクターがその正規表現と一致しない場合、コンテキストはまったく使用されず、posと等しくなり、そのコレクション内0のチェックcurはすべて一緒にスキップされます。これは非常に奇妙に思えます。

簡単なテストショー

var reg = /^[\x20\t\r\n\f]*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\([\x20\t\r\n\f]*((?:-\d)?\d*)[\x20\t\r\n\f]*\)|)(?=[^-]|$)/i;

reg.test('#outer');       // false, no context used
reg.test('#outer:first'); // true, context used
reg.test('#outer:eq(0)'); // true, context used

したがって、疑似セレクターを追加すると、突然コンテキストが使用されますか?

これが意図されたものであるとは思えませんし、奇妙なことのように思えますし、ドキュメンテーションがそうすべきだと言っていることを確実に実行しません。

于 2016-01-03T19:44:10.010 に答える