javascript - 如何将$(this)应用于单个子元素

我想知道是否有一种方法可以在父元素上使用.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
但似乎能够通过针对父母的孩子来做到这一点会更有效率。

最佳答案

使用jQuery Ui的stop事件的另一种方法：

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

CodePen link