jQuery 是不是具有与 Prototype 的 Element.identify 等价的功能？

Posted 2023-05-09

【中文标题】jQuery 是不是具有与 Prototype 的 Element.identify 等价的功能？

【英文标题】：Does jQuery have an equivalent to Prototype's Element.identify?jQuery 是否具有与 Prototype 的 Element.identify 等价的功能？

【发布时间】：2010-10-03 00:22:25

【问题描述】：

是否有内置方法或事实上的默认插件可以让您自动为 jQuery 中的元素分配唯一 ID，或者您是否需要自己实现类似的东西？我正在寻找相当于Prototype's identify method 的jQuery

这是一个例子。我在一个看起来像这样的页面上有一些 html 结构

<span id="prefix_1">foo bar</span>
...
<div id="foo">
   <span></span>
   <span></span>
   <span></span>
</div>

我想为每个跨度分配一个对页面唯一的 ID。所以在调用这样的东西之后

$('#foo span').identify('prefix');   //fake code, no such method

渲染的 DOM 看起来像这样

<span id="prefix_1">foo bar</span>
...
<div id="foo">
   <span id="prefix_2"></span>
   <span id="prefix_3"></span>
   <span id="prefix_4"></span>
</div>

jQuery 有什么官方/强大的东西吗，还是大多数 jQuery 开发人员自己开发的东西？

【问题讨论】：

我从来不需要这样的东西......你会用它做什么？请记住：jQuery 处理元素集，而 Prototype 处理单个元素 - 你最好调整你的逻辑以适应这个模型。

这是一个非常好的观点；我在原型上度过了过去 6 个月。我最初编写了一个在单个页面元素上运行的 jQuery 小部件/插件，使用 #id 连接处理程序。我认为扩展我的代码以对集合进行操作的最简单方法是识别函数。明显错了

如果您仍然关心 10k 另一边的代表，请在答案中添加您的评论。

【参考方案1】：

jQuery.fn.identify = function(prefix) 
    var i = 0;
    return this.each(function() 
        if(this.id) return;
        do  
            i++;
            var id = prefix + '_' + i;
         while($('#' + id).length > 0);            
        $(this).attr('id', id);            
    );
;

$('span').identify('test');

对此进行了测试：

<span id='test_2'></span>
<span>test1</span>
<span>test2</span>
<span>test3</span>

转为：

<span id="test_2"></span>
<span id="test_1">test1</span>
<span id="test_3">test2</span>
<span id="test_4">test3</span>

【讨论】：

该代码有效且受到赞赏，但我仍在寻找已经存在一段时间并在野外证明自己的东西（这绝不是对您提供的代码的批评）

在写这篇文章之前，我浏览了 jQuery 网站，但我找不到任何东西，但我从你的来源那里得到了它。不过，我想我涵盖了所有内容。

【参考方案2】：

我不知道，但您可以通过添加 id 属性并提供 GUID 自己完成此操作。

添加属性：

$(foo).attr( "id", createGuid() );

对于createGuid() 实现，see this question。

请注意，您可以轻松地将其转换为 jQuery plug-in，以便此函数（您甚至可以将其命名为 identify()）在任何 $- 表达式上都可用。

【讨论】：

是的，实现这个概念并不是太困难。另一种方法是在插件函数上存储一个引用计数，并在每次调用它时递增它。我曾经/希望有更官方的东西来捕捉我没有想到的任何边缘情况。

理解并同意获得更“原生”的方法！我也对更好的答案感兴趣......

（信息/代码表示赞赏，值得一票，以防不明显）

【参考方案3】：

基于 Paolo 的解决方案：

jQuery.fn.identify = function(prefix) 
    var i = 0;
    return this.each(function() 
        if($(this).attr('id')) return;
        do  
            i++;
            var id = prefix + '_' + i;
         while($('#' + id).length > 0);            
        $(this).attr('id', id);            
    );
;

$('span').identify('test');

一个小改动可以避免重新计算已使用的 id。

【讨论】：

这就是我最初的方式，但如果只有名为“test_2”的元素，它将直接跳转到“test_3”而无需执行“test_1”——我不确定是否需要与否。

是的，这是因为 "each" 调用中的 "i" 参数。我已将其删除以避免此问题。

【参考方案4】：

我会稍微修改一下给定的函数并实现它：

jQuery.fn.identify = function(prefix) 
    var i = 0;
    return this.each(function() 
        if($(this).attr('id')) return;
        do  
            i++;
            var id = prefix + '_' + i;
         while(document.getElementById(id) != null);            
        $(this).attr('id', id);            
    );
;

ID 可能包含需要转义才能与 jQuery 的 CSS 选择器引擎正常工作的特殊字符，例如“.”。因此，与其找到它们并转义它们，不如用 document 方法替换它更简单、更快捷。

【参考方案5】：

不妨试试

$("#foo span").each(function()
   $(this).attr("id", "prefix_" + $(this).parent().index($(this)));
);

【讨论】：

这些不会是全球唯一的，而您通常希望在 ID 中这样做。