Javascript 如何将$（this）应用于单个子元素

我想知道是否有办法在父元素上使用.children，然后使用$（this）仅引用具有事件处理程序的特定子元素。像这样：或者看这里的钢笔：

我可以为每个孩子添加一个类，并以此为目标，如下所示：

---

但它似乎能够通过将目标锁定在父对象的子对象来实现这一点，效率会更高。

您可以通过链接命令来实现。（卸下

$（此）

部件）

---

使用jQuery Ui的

stop

事件执行此操作的其他方法：

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

---

正如其他人所指出的，您可以使用

$（“.petals”）.children（）

，但我认为直接使用

$（“.petal”）将花瓣作为目标并没有什么特别的错误。你不喜欢这种方法的哪一点？只是petal类不需要用于样式设计，所以它为HtmlHat的完美添加了一个额外的类。谢谢大家!@USPRES909044如果这个答案或任何其他答案在这里已经解决了你的问题，请考虑通过点击复选标记接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。：）我很想去，但我的名声还不够好。谢谢你的帮助。你不必投票决定答案。您只需单击“向上投票”和“向下投票”按钮下方的“检查”按钮，即可接受解决问题的答案。：）
$(document).ready(function() {
  $('.petals').children().draggable()
  $(this).mouseup(function() {
  $(this).animate({
    backgroundColor: 'red',
    top: "+=50"
  }, 2000, function() {

  });
});
});

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

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