jQueryの文字列連結セレクタに関してご質問です


「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]

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

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




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

例えば、

[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]

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




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

[code]

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

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

