選擇一個給定班級的孩子

Question

我有三個類似的部分。我想選擇一個具有給定類的元素，但只在我單擊的元素範圍內。

我目前的代碼選擇全部具有相同類的元素。

如果我添加上mine類的事件處理程序，以及需要進行的target類完成，只爲inner2 one我點擊類的範圍內的一些動作， 讓我怎麼做。

HTML：

<div class="one"> 
<div class="some"> 
     <div class="mine"></div> 
    </div> 
<div class="inner1"> 
</div> 
<div class="inner2"> 
    <div class="target"></div> 
</div> 
</div> 

<div class="one"> 
    <div class="some"> 
     <div class="mine"></div> 
    </div> 
    <div class="inner1"> 
    </div> 
    <div class="inner2"> 
    <div class="target"></div> 
    </div> 
    </div> 

Answer 1

試試這個：你可以利用siblings()得到inner2元素，做它的操作。

$(".mine").click(function() { 
    $(this).siblings('.inner2').slideToggle(function(){ 
     if(temp==0){ 
     $(this).closest(".proElement").addClass('darkBg'); 
     temp=1; 
    } 
    else{ 
     $(this).closest(".proElement").removeClass('darkBg'); 
     temp=0; 
     } 
    });// end of slideToggle 
}); // 

Answer 2

使用下面的代碼。使用find搜索子元素

$('.one').on('click',function(){ 
    var inner2Obj = $(this).find('div.inner2'); 
    inner2Obj.slideToggle(function(){ 
     // your code 
    }); 
    console.log(inner2Obj) // this will log inner2 object within clicked one DIV 
}); 

Answer 3

您還可以使用.siblings（）位置：

$(".mine").click(function() { 
$(this).siblings('.inner2').slideToggle(function(){ 
if(temp==0){ 
    $(this).closest(".proElement").addClass('darkBg'); 
    temp=1; 
} 
else{ 
    $(this).closest(".proElement").removeClass('darkBg'); 
    temp=0; 
} 
});// end of slideToggle 
}); // end of click 

Answer 4

使用sibling

$(".mine").click(function() { 
$(this).siblings('.inner2').slideToggle(function(){ 
if(temp==0){ 
    $(this).closest(".proElement").addClass('darkBg'); 
    temp=1; 
} 
else{ 
    $(this).closest(".proElement").removeClass('darkBg'); 
    temp=0; 
} 
}); 
}); 

demo