在悬停时追加跨度一次

Question

这是我的HTML：

  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>
    <li class='fade'>Socks</li>
  </ul>

这是我的js函数：-

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

我想要这种类型的输出：-

<ul>
        <li>Milk</li>
        <li>Bread</li>
        <li class='fade'>Chips</li>
        <li class='fade'>Socks</li>
<span> ***</span>
      </ul>

在这里，我尝试将鼠标悬停在li上附加一个跨度。
它的工作完美。
但我只想在最后一位李之后追加一次。
谢谢。

Answer 1

使用one：

$("li").one("hover", function () {
   $(this).append($("<span> ***</span>"));
});

http://api.jquery.com/one/