2011-11-13 14 views
2

jQueryでクリックすると、現在のdivのidを選択します。例えば、私はこのようなHTMLを持って
を言う:クリックしたdivのIDを取得

<div class="item" id="10">hello world</div> 
<div class="item_10">hello people</div> 

私は.itemクラスの最初のdivをクリックすると、私はそれに数(10)を追加し、現在のdiv +のidをコピーしたいです、したがって、2番目のdevクラス= item_10に等しい("div id" + 10)になります。

私はcurrentid = this.id;を使用しようとしましたが、それは仕事をdoesnt :(このような

+1

を使用することができませんあなたを助けようとしている人に非常に役立ちます。あなたはあなたが持っているものとあなたが望むもののかなり良い記述を含んでいます。しかし、実際の作業用テストケース(http://jsfiddle.net)を含めることと、代わりに「何が起こったのか」と言うのではなく、「動作しません。間違いましたか?あなたは間違った結果を得ましたか?あなたのコンピュータは火をつけましたか? – Phrogz

答えて

6

最初に、数字で始まるidの属性はHTML4では構文的に違法であることに注意してください。 id="10"を使用している場合は、HTML5のdoctype(<!DOCTYPE html>)を使用していることを確認してください。

あなたの実際のコードを見ていないと、あなたがしていたことがうまくいかなかった理由は言うまでもありません。恐らくそれはあなたが上位の要素(身体のような)にイベントを登録していて、this.idがその上位の要素のidであり、クリックした要素ではなかったからでしょう。

この場合、イベントのtargetプロパティを使用して、クリックした内容を探したいとします。たとえば、次のアクションにみる

$(document.body).click(function(evt){ 
    var clicked = evt.target; 
    var currentID = clicked.id || "No ID!"; 
    $(clicked).html(currentID); 
}) 

http://jsfiddle.net/Gra2P/1/

$('div').click(function(evt){ 
    var currentID = this.id || "No ID!"; 
    $(this).html(currentID); 
}) 

行動にみる:http://jsfiddle.net/Gra2P/

あなたの代わりに特定の要素に登録された場合は、this.id仕事はありません

これは、以下の理由から、理想的ではありません。

  1. それは多くのイベントハンドラの登録の代わりに、1を行い、
  2. このコードが実行された後に、追加のdiv要素が文書に追加されている場合、それらは処理されません。 jQueryの1.7の下で

、あなたは上のイベントをキャッチし、それらにthisセットを持つようにしたい要素の種類のセレクタで、親要素上の単一のイベントハンドラを作成するために、.onメソッドを使用します。コードでは:

$(document.body).on('click','div',function(evt){ 
    var currentID = this.id || "No ID!"; 
    $(this).html(currentID); 
}) 

が行動にみる:http://jsfiddle.net/Gra2P/2/

+0

+1( 'this.id'がうまくいかない理由を含む)と' $(this).attr( 'id') 'を使わずに、さまざまなオプションをすべて説明するために+1します。 – jfriend00

1

何かが、私はあなたが何かやろうとしていると思う

$('div').click(function() { 
    theId = $(this).attr('id'); 
    //Do whatever you want with theId. 
}); 
+0

@downvoter please please? –

+0

私はダウン投票者ではありませんが、おそらくそれはあなたがjQueryを不必要に使用しているからです。 '$(this).attr( 'id')'は、より遅く、より冗長な 'this.id'を書いています... OPは既に"うまくいかない "と言っています。 – Phrogz

2

?::!

$(".item").click(function(){ 
    var id = $(this).attr("id"); 
    var el = $(".item_" + id); 
}); 

を今すぐあなたの2番目のdivです。

0

これは次のようにして実行できます:

 
$('.item').click(function() { 
var divId = $(this).attr("id"); 

}); 
2

あなたは単に "それが動作しない" ことに注意し、今後の参考のためにthis.id

$('div').click(function() { 
    var divid = this.id; 
    alert($('.item_'+divid).html()); 
}); 

Demo

+1

+1 - 最後に、 '$(this).attr( 'id')'の代わりによりシンプルで高速な 'this.id'を使う人。 jQueryは、実際にはより良いときにのみ使用する必要があります。 – jfriend00

関連する問題