2009-08-20 15 views
3

親アイテムを正しく選択する方法がちょっと分かりません。つまり、2 DIVです。ここでjQuery Select 2 Divs Up

<div>Folder</div> 
<div class="file_info"> 
    <a href="test.jpg">Test File</a> 
</div> 

が私の現在のjQueryの:$("a[href$='.jpg']").addClass("Image");

しかし、私は私がしたい、ではなく、<a>にクラスを追加する必要はありませんつまり

、私のHTMLは次のようになります上記の2つのDIVの 'フォルダ'にクラスを追加します。

これを行うにはどうすればよいですか?

ありがとうございます! jQueryの堅牢性を考えると

答えて

4

これは動作します:

$("a[href$='.jpg']").parent().prev().addClass("Image"); 

まずそれは、このようにあなたが必要とdiv要素に到達し、選択した要素の親要素にし、その要素の前に最寄りの兄弟に移動します。

詳細はparentおよびprevのドキュメントを参照してください。

1
$("a[href$='.jpg']").parent().parent().addClass('Image'); 
4

は、あなたがする必要がある何をする複数の方法は、ほとんど常にあります - ここで祖父の要素を選択するためのいくつかのメソッドです:

$("a").parent().parent(); 

これはそれが聞こえるまさにんあなたのアンカーの親の親を選択します。 は、ターゲット要素をすぐに囲む要素です。この場合、両方ともdiv要素です。この例では

$("a").parents("div:eq(1)"); 

、我々は複数の両親を使用していることに気づきます。これは要素のすべての親を検索し、それをコレクションとして返します。次に特定の選択肢を指定して親のに返信したいものを指定します:div:eq(1)

これは、divの要素が必要であることを示していますが、具体的には結果のコレクションの2位にある要素divが必要です。定義上、位置2は1つの要素しか格納できないため、1つの要素、つまり祖父要素を返します。

が等しいdivこと:eq1を求めているときに私は、この「位置2」を呼び出すことで混乱している場合は、単にJavaScriptがコレクション内のゼロベースのインデックスシステムなので、最初のアイテムを使用していることを覚えていますインデックス0にあり、2番目のインデックスはインデックス1にあります。

$("a").parents("div").get(1); 

別の例として、.getを使用する、最後に似。これでも.parentsメソッドを呼び出すと、すべてdiv要素が返されます。これは、div要素でいっぱいのjQueryオブジェクトを返します(親ツリーがdiv要素でいっぱいであると仮定します)。

.getメソッドは、取得する要素に対応するインデックスを取得します。この場合、.parentsを呼び出した結果のコレクションのインデックス1に再び格納される、2番目のdiv要素を探しています。

注目すべき重要な点は、この例は前の例とは異なり、実際のHTMLDivElementを返し、jQueryオブジェクトではないことです。違いは、$()に再度ラップしない限り、jQueryメソッドをHTMLDivElementから呼び出すことができないという点です。