2016-03-29 9 views
1

DOMを取得するjQuery(1.8.3)を使用している間に質問があります。IDとクラスを使ってDOMを取得する方法の違い

$(function() { 
 
    //method 1 
 
    var $y = $('.u')['0'], 
 
    $n = $('.u')['1']; 
 
    $y.click(function(e) { 
 
    alert('hello y'); 
 
    }); 
 
    $n.click(function(e) { 
 
    alert('hello n'); 
 
    }); 
 

 
    //method 2 
 
    var $yid = $('#y'), 
 
    $nid = $('#n'); 
 
    $yid.click(function(e) { 
 
    alert('hello yid'); 
 
    }); 
 
    $nid.click(function(e) { 
 
    alert('hello nid'); 
 
    }); 
 
});
<!-- method 1 --> 
 
<button class="u">yes</button> 
 
<button class="u">no</button> 
 
<br> 
 
<!-- method 2 --> 
 
<button id="y">yesid</button> 
 
<button id="n">noid</button>

code in jsfiddle

私はクリックイベントの作品を作るために、「方法1」を使用できない理由を私は知らない、私はそれが私が行方不明てきたという基本的なものだと思います誰かが私にアドバイスを与えることができますか?

+0

そのより良いあなたはすべての要素を反復処理しているときに、関数 '.each'を使用すると同じことを選択したHTML

<div class="myDiv" id="myId"></div> 

与え

特定のクラスで。 [0]セレクターなし... – Tinmar

+0

私の答えはあなたの問題を解決しましたか?私の答えの下にコメントを追加しないでください。 –

答えて

0

$('.u')[0]戻り値domオブジェクトではなくjQueryオブジェクトです。 click()ハンドラはjQueryオブジェクトでのみ動作しますので、eq()を使用してjQueryオブジェクトを取得してください。

var $y = $('.u').eq(0), 
    $n = $('.u').eq(1); 

FIDDLE

+0

この回答をお寄せいただきありがとうございます。 – whc

0

選択のための.uを使用しているときは、配列のDOMオブジェクトを取得します。 jQueryオブジェクトとしてそれを作るためにあなたのコードにつきとして、あなたは再び

$($('.u')['0']) 
$($('.u')['1']) 

Fiddle Demo

+0

私はあなたとプラナフの答えから何かを得る、ありがとう! – whc

0

のようにそれを選択する必要がありclassで何かを選択すると、idで何かを選択する以外の項目の異なる種類を返します。

classで何かを選択すると、そのクラスのすべてを含むボックス(配列)が返されるとします。次に、idで何かを選択すると、そのidの項目が返されると想像してください。

クラスで何かを選択すると、クラスに1つのdomアイテムがあったとしても、 "このクラスのすべてのドム"のボックス(配列)が表示されます。

jqueryの.eq()関数を使用すると、クラスの最初またはn番目の項目を指定できます。 jqueryのスクリプト

$(".myClass").eq(0) 

$("#myId") 
関連する問題