jQuery 　要素集合の特定要素とそれ以外の要素の操作

以前にも書いたが、よくjQueryやActionScriptでは下記のようロジックを使います。
またよく「index()」メソッドを利用して「eq(index)」を利用して特定の操作などをしてました。

var $preobj=null;

$(クリックする要素).click(function(){
  if($preobj!=null){
     //
     $preobj.hide();
   }
 //インデックスを取得する
var idx=$(this).index();
//要素を一時的に保存
$preobj=$("jqueryオブジェ").eq(idx).show();
});

このロジックは特にActionScriptでよく利用しているのでjQueryでもよく利用できるのだが、兄弟要素でであれば「index()」と「eq()」で特定できるが、もし兄弟要素でなかったりインデックスの順番がずれたらダメっぽい。なので調べてみた

リンクボタンのhref属性を利用して操作する要素を特定する

jqueryで要素を扱うときは$(“#content”)」といった記述になるがこの「#content」の部分をリンクボタンの「href」属性に設定してjqueryで取得すれば特定の要素にアクセスできる

//href属性のリンク先として#c1~#c5を設定する

上記のように設定したら下記のようにアクセスする

//リストのaタグをターゲット要素とする 
$("ul li a").click(function(){

//クリックしたaタグ要素のattrでhref属性を調べる
$(　$(this).attr("href")　)

//上記は下記と同じ意味になる  例えばcontent1をクリックした場合
$("#c1")

});

前回操作したオブジェクトに関わらずすべて操作する

先ほども述べたように、以前はいったん別の変数にjQueryオブジェクトを保存してましたが、今回の場合はまず全要素を操作して、その後特定の要素を操作する

例えばリストボタンでクリックしたらまず全リストボタンから「selected」クラスを削除してその後、クリックしたボタン「$(this)」に「selected」クラスを追加する

//リンクボタンのcontent1は最初は表示


$("ul li a").click(function(){
　　//aタグの全要素からselectedクラスを削除する
　$("ul li a").removeClass("selected");

　　//その後にクリックしたボタンのaタグにselectedクラスを追加する
　　$(this).addClass("selected");
});

という訳で長くなってしまうので次回は、今回のロジックを利用してタブメニューを作成してみます。