2011-12-26 8 views
2

私はちょうどこの2日間jQueryを学んだので、これは初めてのことです。jQueryセレクタが気になる

私は単純なナビゲーションサイドバーを構築しようとしています。バーをテーブルとして構築し、ユーザーが特定のセルを表示すると、そのセルが点灯し、元のバーの隣に別のサブナビゲーションバーが表示されます。

ヘッダーのすぐ下に元のバーが表示されます。だから私が使った構文は:

var headerHeight = $('#headerTable').height(); 
$('#selectStart').offset({left: 0, top: headerHeight}); 
.... 
<table id="selectStart" class="selector1"> 
    <tr><td id="sel1Projects" class="selector1"> 
.... 

これまでのところ、とても良いです。ここで、ユーザーがそのテーブルをクリックすると、対応するサブナビゲーションバーが最初のナビゲーションバーのすぐ右に表示されるようにします。だから私はそれをテストするために2つの新しいテーブルを書きました:

<table id="selectProjects" id="table2" class="selector2" class="table2"> 
<tr><td id="sel2Project1" class="selector2"> 
.... 
<table id="selectDevelopment" id="table2" class="selector2" class="table2"> 
<tr><td id="sel2Dev1" class="selector2"> 

しかし、これらのセレクタは首に本当の痛みです。私がやったとき

var select1Width = $('#selectStart').width(); 
$('#selectProjects').offset({left: select1Width, top: headerHeight}); 
$('#selectDevelopment').offset({left: select1Width, top: headerHeight}); 

それは完璧に動作します。しかし、これは非常に良いコーディングではありません - 私はすべての同じ方法を配置することができるようにすべての類似したテーブルをグループ化する必要がありますし、私はユーザーがその時に見たいものを表示するだけです。

$('.selector2').offset(...) 

限り、すべてのテーブルを選択するなど正常に動作しますが、それらすべてが、スタイリングの目的のために同じクラスを共有しているので、それはまた、同じ場所ですべてのを置きます。これまでのところ、これはすべて私が期待したものです。

$('.selector2 table').offset(...) 

これは、このクラスのテーブルを選択すると予想されます。それは何もしなかった。私がそれを入力している方法に問題はありますか? いくつかの不満の後、私は2番目のクラス "table2"をそれぞれに追加しました。

$('#table2').offset(...) 

まだ何もありません。そこで新しいクラスを追加しました。

$('.table2').offset(...) 

Nothing;ただし、セレクタ2が共有する他のクラスを使用すると機能します。また、テーブルを個別に選択したときに、目的の結果が得られたため、テーブルを選択する必要がないという問題はありません。

私は何を間違えているのですか、私は何を理解していませんか?

+0

私は本当にあなたの質問を理解していません。多分あなたはこれを必要とします:$( "#selectProjects#sel2Project1")?複数の要素に同じidを使用しないでください。 – Fenec

+0

いいえ、私は​​要素を選択しようとしていません。私はテーブルを適切に整列させたいが、jQueryではそれらをグループとして選択することはできない。 –

+0

テーブルにはそれぞれ2つの 'class'属性があります。私はそれが有効だとは思わない。余分なクラスを追加する場合は、既存の 'class'属性に追加しますが、前のクラスとはスペースで区切ります。 – BoltClock

答えて

1

を解決して変更すると、この

を試みるかどうかを確認... jqueryのためのIDを繰り返しカント

$( 'table.selector2')。offset(...)

+0

ありがとう!これはうまくいった。だから私が以前に試していたことに何が間違っていたのですか? –

+1

'' '.selector2 table'''は、selector2クラスを持つ要素の子をテーブルとして与えます。 '' 'table.selector2'''はselector2クラスを持つテーブルを提供します。 –

0

あなたが。(...)オフセット

それは代わりに$( 'selector2テーブル')のごPROB

+0

それらから "table2" idを削除しても何もしませんでした。 –

+0

クラスの組み合わせはどうですか? – Toping