javascript - 如何将 $(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() {

  });
});
});

我能够通过为每个 child 添加一个类(class)并以此为目标来工作，就像这样:http://codepen.io/coralsea/pen/emdGmo但似乎能够通过针对 parent 的 child 来做到这一点会更有效率。

Answer 1

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