Question

我有三个类似的部分。我想选择一个具有给定类的元素，但只在我单击的元素范围内。

我当前的代码选择 all 具有相同类的元素。

如果我在类mine上添加事件处理程序，并且需要在target类上执行某些操作，则仅针对我单击的类one范围内的inner2，那我怎么做

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

使用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

Answer 4

你也可以在这里使用.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

选择具有给定班级的孩子

4 个答案: