要素IDには、クリックに基づく2つの重複したクラス名があります

Question

私は異なるIDを持つ2つのdivを持っていますが、同じクラス名です。例：ウィンドウ1 &ウィンドウ2 ...

<div id="Window1" class="name"> 
    <span id="Admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span id="Admin"></span> 
</div> 

私はIDが「管理」をクリックすると、「名前」の要素IDを取得したいです。明らかに、VARのソリューションは、私はこれは私がやろうとしていますかを説明願ってい

var Window_id = $(".name").attr("id"); 

...以下間違っているが、これに近いものを設定したいです。前もって感謝します。

Answer 1

を使用するクラス名であると仮定すると、この

var parentID=$(".spanClassName").parent().attr("id"); 

を行うことができますまず、同じIDを持つ2つのオブジェクトを持つことはできません。したがって、id="Admin"という2つのオブジェクトを持つことはできません。それぞれに異なるIDを付けるか、共通のクラス名（またはその両方）を使用する必要があります。だから、これまでそれを変更できます。

<div id="Window1" class="name"> 
    <span id="Admin1" class="admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span id="Admin2" class="admin"></span> 
</div> 

そして、その後、クリックを処理し、クリックされたオブジェクトの親のIDを取得するには、このjQueryのを使用します。

$(".admin").click(function() { 
    var parentId = $(this).parent().attr("id"); 
}); 

か、もう少し効率的に少しのjQueryを使用して：それはいくつかのHTMLの変更に対して少しより堅牢なので

$(".admin").click(function() { 
    var parentId = this.parentNode.id 
}); 

私のお気に入りのオプションは、実際にこれをだろう（のような新しいコンテナのdivは、周りを導入した場合スパン）：最初の2つのオプションで使用

$(".admin").click(function() { 
    var parentId = $(this).closest(".name").attr("id"); 
}); 

.parent()または.parentNodeは、DOM hieararchyで、正確に1つ上のレベルに行きます。

.closest(".name")は、渡されたセレクタに一致する親が見つかるまで、必要に応じて親階層に移動します。もう少し強力で、HTMLが少し変わったとしても、あなたが望む親を確実に得ることができるでしょう。必ずしも必要ではありませんが、知る価値があります。

Answer 2

clickハンドラーの内部でこれを使用します。

$(this).parent().attr("id"); 

$(this).parent()クラスnameとdiv要素であるとattr('id')はdiv要素のIDを取得する親要素を取得します。

サイドノート：理想的には、ページ上の要素IDは、マークアップには一意でない必要があります。

を管理者spanにする代わりに、共通のクラスとクラスセレクタを使用して選択することをお勧めします。このようなもの。

HTML

<div id="Window1" class="name"> 
    <span class="admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span class="admin"></span> 
</div> 

JS

$('.admin').click(function(){ 
    var parentId = $(this).parent().attr("id"); 

    //Or 
    var parentId = $(this).parent()[0].id; 

    //Or 
    var parentId = $(this).closest('.name').attr('id'); 

    //Or 
    var parentId = $(this).closest('.name')[0].id; 
}); 

Answer 3

あなたは2つの要素のために同じIDを与えることはできません。ボツワンのスパンに対して同じIDを与えています。

あなたが親IDを取得するには、スパンと同じクラス名のdifferntのIDを持っている場合、あなたはspanClassNameあなたは両方のスパンのため

$(".spanClassName").click(function(){  
    var parentID= $(this).parent().attr("id"); 
}); 

Answer 4

「管理者」と同じIDを持つ2つのスパンを持つことはできません。あなたはidを持つ要素「管理」他の賢明でより多くを持っているので、あなたはクラスの管理」を使用する必要があり、この

<div id="Window1" class="name"> 
    <span>Admin</span> 
</div> 

<div id="Window2" class="name"> 
    <span>Admin</span> 
</div> 

$('.name span').click(function(e){ 
    console.log($(this).parent('.name').attr('id')); 
}); 

Answer 5

<div id="Window1" class="name"> 
    <span class="Admin">a</span> 
</div> 

<div id="Window2" class="name"> 
    <span class="Admin">a</span> 
</div> 
<script> 
$('.Admin').on('click', function(){ 
    var id = $(this).parent().attr('id'); 
    alert(id); 
}); 
</script> 

を試してみてください。