jQueryのこの記述の意味がわからない

他人のJSコードを読んでいましたら、以下のようなコードがありました。
$("div", "#sample").removeClass('active');

現在動いているソースのため、間違いではないと思いますが、
$("", "")の記述ってできるのでしょうか？意味がわからず困っております。
初歩的な質問かもしれませんが、よろしくお願いします。

ちなみに以下のソースでしたら、理解できます。
divタグの#sampleの"active"クラスを除去すると言う意味だと考えられます。
$("div, #sample").removeClass('active');

行動規範の内容に同意します

回答5件

仕様にはない記述だった（contextの型に、SelectorやStringは指定されていない）ので、気になってjQueryのソースを読んでみましたが、

javascript
1function (selector, context, root) {
2//...
3  if (typeof selector === "string") {
4//...
5        if (match && (match[1] || !context)) {
6//...
7        } else if (!context || context.jquery) {
8//...
9        } else {
10            return this.constructor(context).find(selector);
11        }
12//...

とあり、セレクタが有効で第2引数がjQueryオブジェクトではない場合、this.constructor(context).find(selector)を返すようです。試してみたところ、jQオブジェクトのconstructorはjQueryであるようなので、yambejpさんのご回答のような振る舞いになるかと思います。

ただ、ドキュメントにない仕様ですので今後のバージョンで動作するかどうかは不明かと思います。多用されない方がいいのではないかな、と思います。

投稿2017/05/29 11:12

編集2017/05/29 11:31

Lhankor_Mhy

総合スコア36115

maaru332

2017/05/29 16:58

ご丁寧にありがとうございました。かなり深いところまで勉強になりました。

maaru332

2017/05/30 02:31

コンテキストの理解が低くて、恐縮なのですが、こちらは以下の仕様に書かれている内容ではないのでしょうか？詳しい方ご回答いただけると幸いです。 http://api.jquery.com/jQuery/

Lhankor_Mhy

2017/05/30 07:45

そちらのページにある通り、jQuery()メソッドで第2引数に文字列を取る形式はないはずです。（context の型は Element or jQuery となっています）なので、ご提示の書き方は仕様外の使い方だと思います。

行動規範の内容に同意します

ベストアンサー

jQuery()
http://api.jquery.com/jQuery/

第2パラメーターはセレクタコンテキストと書かれていて、セレクタの検索対象を絞り込むことができます。
この例示にあるように、要素で使うと便利そうです。

JavaScript
1$( "div.foo" ).click(function() {
2  $( "span", this ).addClass( "bar" );
3});

ということで問題の箇所は、$('#sample div') と同等ということになります。

投稿2017/05/29 10:47

x_x

総合スコア13749

maaru332

2017/05/29 16:59

ベストアンサーとさせていただきました。ありがとうございました。

行動規範の内容に同意します

回答は他の方がされていますので、ちょっと本件とずれますが、

ちなみに以下のソースでしたら、理解できます。
divタグの#sampleの"active"クラスを除去すると言う意味だと考えられます。
$("div, #sample").removeClass('active');

これはそうではありません。
divタグか、id=sample のもののactiveクラスを除去するです。
カンマ区切りのセレクタは OR を表します。

HTML
1<div id="foo" class="active">
2<div id="bar" class="active">
3<span id="baz" class="active">
4<span id="sample" class="active">

の場合だと、３行目以外が対象ということになります。

投稿2017/05/29 10:52

編集2017/05/29 10:54

root_jp

総合スコア4666

maaru332

2017/05/29 16:51

失礼いたしました。その通り、ORですね。

行動規範の内容に同意します

実験してみるといいかもしれません^^

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title></title>
    <style media="screen">
      div{
        width: 250px;
        height: 50px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="sample1">
      div.sample1
    </div>

    <div class="">
      parent
        <div class="sample1">
          div (div.sample1) light blue
        </div>
    </div>

    <div class="sample1">
      parent
      <div class="">
        (div.sample1) div green
      </div>
    </div>

    <div class="">
      div
    </div>

    <main>
      parent
      <div class="sample1">
        main (div.sample1)
      </div>
    </main>

    <script type="text/javascript">
      $(".sample1","div").css('backgroundColor','#0ff');//light blue
      $("div",".sample1").css('backgroundColor','#0f0');//green
    </script>

  </body>
</html>

投稿2017/05/29 10:43