jquery - 如何在不多次执行函数的情况下将转换结束事件绑定(bind)到多个元素？

Question

我有一个包含图像的列表，我使用 css 转换移动它们。

因为这些图片很大，我必须在列表元素上使用 css transition 以避免在 Safari 上闪烁。

<ul id="container">
    <li class="moveLeft>...</li>
    <li class="moveLeft">...</li>
    <li class="moveLeft>...</li>
    <li class="moveLeft>...</li>
    <li class="moveLeft>...</li>
</ul>

问题是，如果我在 ul 元素上使用绑定(bind)，绑定(bind)到过渡端的函数将执行 5 次(元素的数量):

$("container").bind("webkitTransitionEnd", function() {
    doSomething()
});

我尝试将事件处理程序绑定(bind)到列表的第二个子元素上，但是因为列表元素已更新(删除、添加元素)，当第二个元素被替换时事件处理程序将停止.

$("container").children().eq(2).bind("webkitTransitionEnd", function() {
    doSomething()
});

我认为解决方案是将事件处理程序绑定(bind)到父级，但是每次触发事件时我该怎么做才能执行该函数一次而不是五次？

Answer 1

仅绑定(bind)到父 li(在您的情况下):你可以使用 nth-child()

例如:

$("#container li:nth-child(1)").bind("webkitTransitionEnd", function(event) {
    doSomething();
});
function doSomething() {
  //do something

}