javascript - 使用 JQuery 创建唯一 ID

Question

这个问题可能是重复的(但我找不到它)，所以如果它是多余的，我深表歉意。我正在尝试使用 JQuery 的 .remove 函数来删除(显然)静态 HTML 原型(prototype)中的 li 元素。我想知道是否可以单独使用 JS 创建递增的 ID，而不是为每个要删除的 li 编写一个 javascript block 。 (我正在将 Serve 与 HAML 和 SASS 一起使用)。这是我所拥有的。

/view-file.html.haml

%ul
  %li#removeThis1
    %a.remover1{:src => "#"} Remove

/application.js

...
$(".remover1").click(function () {
  $("li#removeThis1").fadeOut( function() { $(this).remove(); });
});

关于如何将 .remover1 增加到 .remover2 等有什么想法吗？同样，li##removeThis1 到 #removeThis2 等。

我需要这一切在页面加载时发生。

Answer 1

元素之间存在祖先关系，因此请充分利用它。

  // don't bother numbering the class. Use a common class
$(".remover").click(function () {

       // find the closest ancestor with an ID that start with "removeThis"
    $(this).closest("li[id^=removeThis]")
           .fadeOut( function() { $(this).remove(); });
});

<小时/>

或者，如果您确实不需要祖先的 ID，也可以在那里使用一个类...

  // don't bother numbering the class. Use a common class
$(".remover").click(function () {

       // find the closest ancestor with the class "removeThis"
    $(this).closest(".removeThis")
           .fadeOut( function() { $(this).remove(); });
});

<小时/>

最终，如果您要使用 ID，您需要在服务器端生成它们，然后使用处理程序从元素中提取 ID 的数字部分，并将其连接到祖先的选择器中。