Question

是否有内置方法或defacto默认插件可以让你自动为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开发人员自己推出的东西吗？

Answer 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>

Answer 2

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

添加属性：

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

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

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

Answer 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。

Answer 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选择器引擎一起正常工作 - 比如“。”。因此，不是找到它们并逃避它们，而是用文档方法替换它更简单快捷。

Answer 5

也许试试

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

jQuery是否与Prototype的Element.identify等效？

5 个答案: