jQueryセレクタを使用してこの要素を取得する方法は？

Question

私はこのようなパスを使用して、いくつかのウェブサイトからpresaved要素の値を取得するためのjQueryを使用します。

HTML BODY #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN

問題I 5 [3]/DIV /テーブル/ TBODY/TR DIV/DIV/

/HTML /本体/ DIV /センターのウェブサイトのページがテーブルに含まれている場合に直面し、同じ構成要素は、以下のような他の同様の経路であります]/td/div/table/tbody/t R/TD /テーブル/のtbody/TR/TD /テーブル/のtbody/TR [3]/TD

最後のパスでは、その可能性は同じことを見つけるためにすることを意味している5 trがあることを見ることができるように要素を別のパスに挿入します。

私はjQueryのセレクタとしてパスを使用し、jQueryは要素の配列を返します。どちらが正しい要素なのかわかりません。

だから私の質問は次のとおりです。

使用後のより良いパスを保存する方法は？この新しいパスを解析してjQueryセレクタとして準備する方法について説明します。

質問が明確でない場合は、私に尋ねてください。私は詳細を説明するために最善を尽くします。

Answer 1

なぜXPathを使用しているのかというと、XPath互換性のないプラグインを使用していないため、jQueryはこれ以上サポートしていないため、 1.2の

リリースノートを参照して：http://www.learningjquery.com/2007/09/upgrading-to-jquery-12

のXPath互換プラグイン：http://docs.jquery.com/Release:jQuery_1.2#XPath_Compatibility_Plugin

ちょうどあなたのセレクタとして$("#colorSwatchContent span")を使用しています。 CSSスタイルのセクレクタは、idがcolorSwatchContentの要素のすべての子孫スパン要素を見つけることを意味します。 htmlのidは一意の識別名なので、これはあなたが得ることができるほど具体的です。

$("#colorSwatchContent > span")は、唯一の直接子孫（immedieate子供）

$("#colorSwatchContent > span:first")を選択する最初のスパンの直接の子孫

Answer 2

tr [5]は5つのtrがあることを意味するわけではありません（10の可能性があります）、5番目を選択していることを意味します。

jQueryがサポートする要素を取得するためにXPathセレクタを使用しているようです。

あなたがHTMLのコントロールを持っている場合、特定の要素を選択する最も簡単な方法は、それをあなたの最初の例では、

HTML BODY #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN 

が

#colorSwatchContent SPAN 

にequivilantあるIDを...与えることです

Answer 3

一致する要素が多数ある場合、特定の要素を取得するには、要素クラスを指定する必要があります。たとえば、それぞれの要素に何が記述されているかをクラスに指定します。次に、各行に何が記述されているクラスを与えるかを指定します。そして、それは例えば、記述する行の特定の部分を記述するクラスと各td：

<table class="person"> 
    <tr class="john-doe"> 
     <td class="name">John Doe</td> 
     <td class="phone-numbers"> 
      <table class="phone-numbers"> 
       <tr class="cell-phone"> 
        <th class="label">Cell Phone:</th> 
        <td class="number">555-1234</td> 
       </tr> 
       <tr class="home-phone"> 
        <th class="label">Home Phone:</th> 
        <td class="number">555-1234</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

あなたの要素が適切に、あなたはjQueryのでCSSスタイルセレクタを使用することができます説明していたら。例えばちょうど自宅の電話を持っているtdがやってと同じくらい簡単になります取得：これはあなたが正しい道を見出し得る

$('table.person tr.home-phone td.number'); 

希望を。

非常に複雑なテーブル構造がある場合は、テーブルに入れる必要があるかどうかを再考する必要があります。

Answer 4

jQueryはxpathをサポートしているので、特定のxpathを取得するためにfirebugを使用し、それをjQueryで使用することができます。

Firebugでソースをブラウズして、任意の要素を右クリックしてから、「xpathをコピー」を選択します。