35312


「Web制作の現場で使う jQueryデザイン入門」のP.182にある記述について、理解出来ないのでご質問させて下さい。  
それでは、コードを載せます。

[code]

    $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
    
[/code]

上記コードを展開することを考えますと、

[code]

    $(ul.panel li:not(#tab1).hide();
    
[/code]

このようになってしまうのではないかと考えてしまいます。これだと正しく動きません。

正しくは、

[code]

    $("ul.panel li:not(#tab1)").hide();
    
[/code]

と解釈されるようなのですが、どこから括弧（ダブルクォーテーション）が出てきたのかがわかりません。

はじめて質問するのでわかりにくいことになってしまっているのではないかと思いますが、どうかご教授願えませんでしょうか。よろしくお願いいたします。


CC BY-SA 3.0
2017-06-02T20:44:22.177
35235
2017-06-05T15:30:35.257
2017-06-05T15:30:35.257
23540
23540
question
jquery
jQueryの文字列連結セレクタに関してご質問です


一部を仮に変数に置き換えると以下のようになります。

[code]

    var $selected = $("ul.tab li a.selected").attr("href");
    $("ul.panel li:not(" + $selected + ")").hide();
    
[/code]

文字列を連結した結果は文字列となりますので、結果はご提示いただいているものとなります。  
整理するとご納得いただけるのではないかと思います。


CC BY-SA 3.0
2017-06-05T00:05:13.943
35277
2017-06-05T00:05:13.943
17324
35235
answer


jQueryの問題かと思いきや実はjavascriptの文字列連結の問題のようですね。

まずは質問に記載されているセレクタの部分「$(ここの部分)」だけわかりやすいように抜き出します。

[code]

    "ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")"
    
[/code]

ここの文字列だけを解析する必要があります。  
この中で＋で連結されているので３つの状態に別れるのは理解できますでしょうか？

[code]

    "ul.panel li:not(" //文字列1
    +　//連結修飾子
    $("ul.tab li a.selected").attr("href") //jQueryのメソッド
    + //連結修飾子
    ")" //文字列2
    
[/code]

つまり文字列1と文字列2の間にjQueryのメソッドが入っていることになります。  
実際はjQueryのメソッドは結果として "#tab1"という文字列を返すことになるので、

[code]

    "ul.panel li:not(" //文字列1
    +　//連結修飾子
    "#tab1" //jQueryのメソッド結果
    + //連結修飾子
    ")" //文字列2
    
[/code]

一度コンソールログ等で確認するといいかもしれません。

[code]

    console.log("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")")
    
[/code]

例えばスニペット等を利用して見ることができます。

[code]

    console.log("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")");
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <ul class="tab">
      <li><a href="#tab1" class="selected">aa</li>
      <li><a href="#tab2">aa</li>
    </ul>
[/code]

参考サイト 文字列連結  
<https://www.ajaxtower.jp/js/ope/index16.html>


CC BY-SA 3.0
2017-06-05T00:15:08.703
35278
2017-06-05T00:15:08.703
22665
35235
answer


`$()` の括弧の中は、直接的な文字列でなくても、結果が文字列であれば問題ありません。

例えば、

[code]

    $("ul").hide();
    
[/code]

これは当然問題ありませんが、

[code]

    var sel = "ul";
    $(sel).hide();
    
[/code]

これも変数 `sel` の値が文字列なので問題ありません。  
同様に、

[code]

    var sel = "ul.panel li:not(" + $("ul.tab li a.selected").attr("href") + ")";
    $(sel).hide();
    
[/code]

これも、文字列を連結しているだけで、変数 `sel` の値は結局文字列なので問題ありませんし、

[code]

    $("ul.panel li:not(" + $("ul.tab li a.selected").attr("href") + ")").hide();
    
[/code]

これも `$()` の括弧の中は同様に文字列になるので問題ありません。


CC BY-SA 3.0
2017-06-05T14:34:53.560
35312
2017-06-05T14:34:53.560
5288
35235
answer