JQUERY、クローゼットIDを見つける？

Question

<ul id="containerA" class="container"> 
     <li> 
     <span class="sportsType" id="football">Football</span> 
      <ul> 
       <li class="sportsMatch"> 
       <img src="/static/img/arrow_left.png" class="subArrow"/>A vs B <img src="/static/img/arrow_left.png" class="star"/> 
       </li> 

クラススターでPNGをクリックすると、一番上のul（containerA）を返したいと思います。私はのIDを取得することに置くことができるもの、

<ul id="containerB" class="container"> 
<li class="sportsMatch"> 
<img src="/static/img/arrow_left.png" class="subArrow"/>A vs B <img src="/static/img/arrow_left.png" class="star"/> 
</li> 

はここに私のJScriptだ：私は.parent.parent.parentなど使用することができますが、それはまた、非常に複雑とイマイチリストの別のセットで作業する必要がありますクローゼットコンテナ？

$(".star").click(function() {} 

Answer 1

あなたは、クリックされた要素（イベントハンドラのthis内部）の最も近いanscestorを見つけるために.closestを使用したいとしています。あなたは、コンテナのidをしたい場合は、（@ sg3sは彼のコメントで指摘するように）attrまたはpropを使用するか、直接DOM要素にアクセスし、idプロパティにアクセスすることができます

$(".star").click(function() { 
    var $container = $(this).closest(".container"), 
     containerId = $container.attr("id"); 
}); 

例：http://jsfiddle.net/L7JyY/

Answer 2

あなたは最上部を尋ねたので、ancesotor hiearchyにclass="container"という複数のオブジェクトがあるような傷があります。あなたはclass="container"（例えば最上位ではないが、クリック上のオブジェクトに最も近いもの）と、最も近い祖先をしたいかがある場合は

$(".star").click(function() { 
    var topContainer = $(this).parents(".container").last(); 
} 

：そのような場合、あなたはこれを行うだろうあなたは少し単純であるこれを行うだろう、class="container"と1人の祖先になるだろう：

$(".star").click(function() { 
    var container = $(this).closest(".container"); 
} 

Answer 3

その後、IDを取得するattrメソッドを使用して、要素を取得するにはclosest methodを使用します。

var ul = $(this).closest('.container'); 
var id = ul.attr('id'); 

Answer 4

同じクラスを持つ他の要素は、PNGの間、あなたはこの

$(".star").click(function() { 
    $(this).closest('.container') 
}) 

Answer 5

を行うことができます。これはあなたの最初の昇順親をもたらすという点で、存在しない場合、ULは常にクラスのコンテナ」を持っているとした場合セレクタマッチング：

$(".star").click(function() { 
    $(this).parentsUntil(".container").parent(); 
} 

http://api.jquery.com/parentsUntil/