前後の「＋」の意味は？

質問

タブパネルを作成する以下のコードで分からない個所があります。
実際のページは→（http://editors.ascii.jp/m-kobashigawa/jqsample/chapter03/04/v2/sample2.html）

$(function(){
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("ul.panel li").hide();
$($(this).attr("href")).show();
return false;
});
});

分からないのは２行目の ("+$("ul.tab li a.selected").attr("href")+") です。

＋（プラス）が前後に付いていますが、これがどういう意味なのか分かりません・・・

どうかご指南お願いいたします！

回答No.2

shiren2 · ベストアンサー

分解してみますと、こうですね。

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

以下の文と同じです。

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

お礼

再度のご回答感謝いたします！

初心者なもので、もう少し質問してもよろしいでしょうか・・・？

まず教えていただいた１行目の、「var href = $("ul.tab li a.selected").attr("href");」ですが、

ulタグのtabクラスのli aタグのselectedクラスのhref属性を取得し
変数hrefに代入するということですよね。
初期設定では、#tab1にselectedがありますので変数href＝#tab1になる、
という理解で宜しいでしょうか。

それで２行目の「var e = "ul.panel li:not(" + href + ")";」ですが

ulタグのpanelクラスのliタグの中で変数href（＝#tab1）の無いものを
変数eに代入するという理解で宜しいでしょうか。

そして３行目の「$(e).hide();」では

#tab1以外のpanel（#tab2から5）の消去を命令するということだと思うんですが
２行目で＋をつけていますが、＋を書かずにhrefだけではダメなのでしょうか？

やはり＋の有無がどう作用するのかがきちんと理解できません・・・

回答No.3

shiren2

引数が文字列ということは理解されてますか。
href属性は文字列ですよね。
＞var href = $("ul.tab li a.selected").attr("href");

そしてその前後もダブルクォートで囲われているので文字列です。
＞var e = "ul.panel li:not(" + href + ")";

＞＋を書かずにhrefだけではダメなのでしょうか？
var str = "AAA" + "BBB";
alert(str);

こう書けば、その結果は"AAABBB"になります。
"AAA" "BBB"と書けば、構文エラーが出ますね。
プログラム（インタプリタ）は、「二つの連続した文字列をどう処理したらいいかわからない」からです。
そこで+演算子を書いて、「この二つの文字列は連結してください」と伝えます。

実行部分の動作はほぼ合っていると思います（変数eはただの文字列ですが…。セレクターに渡すことで初めてオブジェクトになります $(e)）。

お礼

何度も答えていただき申し訳ありません。

＞ダブルクォートで囲われているので文字列です

そうでしたね！
ようやく＋でつなげる意味が分かりました！
丁寧なご説明ありがとうございました！

回答No.1

shiren2

文字列の結合ですね。
数値同士だと足し算になり、一方か両方が文字列だと文字列の結合になります。

お礼

早速のご回答ありがとうございます！

結合かな？とは考えたんですが、
その場合、どの部分とどの部分が「$("ul.tab li a.selected").attr("href")」と結合しているのでしょうか？

それが分からない状態です・・・