$ (this)를 단일 자식 요소에 적용하는 방법

Question

부모 요소에서 .children을 사용하고 $ (this)를 사용하여 이벤트 처리기로 특정 자식 요소 만 참조하는 방법이 있는지 궁금합니다. 이처럼 : 나 여기에 펜을 참조하십시오 http://codepen.io/coralsea/pen/JoRrRG

<div class="petals"> 
    <div class="petal-1"> 
    </div> 
    <div class="petal-2"> 
    </div> 
    <div class="petal-3"> 
    </div> 
    <div class="petal-4"> 
    </div> 
    <div class="petal-5"> 
    </div> 
    <div class="petal-6"> 
    </div> 
    <div class="petal-7"> 
    </div> 
</div> 

/

$(document).ready(function() { 
    $('.petals').children().draggable() 
    $(this).mouseup(function() { 
    $(this).animate({ 
    backgroundColor: 'red', 
    top: "+=50" 
    }, 2000, function() { 

    }); 
}); 
}); 

나는 각 자녀에 클래스를 추가하고 대상으로 작업 할 수 있었다과 같이, 그 : http://codepen.io/coralsea/pen/emdGmo이 있지만 수있는 것 부모의 자녀를 대상으로하는 것이 더 효율적입니다.

Answer 1

다른 방법 (가 $(this) 부분 제거) :

$(document).ready(function() { 
    $('.petals').children().draggable({ 
     stop: function (event, ui) { 
      $(this).animate({ 
       backgroundColor: 'red', 
       top: "+=50" 
      }, 2000, function() { 
       // Animation complete. 
      }); 
     } 
    }); 
}); 

CodePen link

Answer 2

명령을 연결할 수 있습니다. jQuery를 UI의 stop 이벤트를 사용하여 일을

$(document).ready(function() { 
    $('.petals') 
     .children() 
     .draggable() 
     .mouseup(function() { 
     $(this).animate({ 
      backgroundColor: 'red', 
      top: "+=50" 
     }, 2000, function() { 
      // Animation complete. 
     }); 
    }); 
}); 

http://codepen.io/gpetrioli/pen/WbGZog