Javascript jQuery是否有与Prototype';s元素识别?
是否有一个内置的方法或默认插件可以让您自动为jQuery中的元素分配一个唯一的ID,或者您需要自己实现类似的东西?我正在寻找相当于 这里有一个例子。我在一个页面上有一些HTML结构,如下所示Javascript jQuery是否有与Prototype';s元素识别?,javascript,jquery,ajax,dom,prototypejs,Javascript,Jquery,Ajax,Dom,Prototypejs,是否有一个内置的方法或默认插件可以让您自动为jQuery中的元素分配一个唯一的ID,或者您需要自己实现类似的东西?我正在寻找相当于 这里有一个例子。我在一个页面上有一些HTML结构,如下所示 <span id="prefix_1">foo bar</span> ... <div id="foo"> <span></span> <span></span> <span></span
<span id="prefix_1">foo bar</span>
...
<div id="foo">
<span></span>
<span></span>
<span></span>
</div>
$('#foo span').identify('prefix'); //fake code, no such method
<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>
呈现的DOM看起来像这样
<span id="prefix_1">foo bar</span>
...
<div id="foo">
<span></span>
<span></span>
<span></span>
</div>
$('#foo span').identify('prefix'); //fake code, no such method
<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>
foo-bar
...
jQuery是否有任何官方的ish/robust功能,或者这是大多数jQuery开发人员自己开发的功能?我不知道,但是您可以自己添加
id
属性并提供GUID来实现这一功能
要添加属性,请执行以下操作:
$(foo).attr( "id", createGuid() );
对于createGuid()
实现
请注意,您可以很容易地将其转换为,以便在任何$-
表达式上都可以使用此函数(您甚至可以将其命名为identify()
)
$("#foo span").each(function(){
$(this).attr("id", "prefix_" + $(this).parent().index($(this)));
});
在以下设备上进行了测试:
<span id='test_2'></span>
<span>test1</span>
<span>test2</span>
<span>test3</span>
测试1
测试2
测试3
把它转到:
<span id="test_2"></span>
<span id="test_1">test1</span>
<span id="test_3">test2</span>
<span id="test_4">test3</span>
测试1
测试2
测试3
基于保罗的解决方案:
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。我会稍微修改给定的函数,使其:
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方法代替查找和转义它们更简单、更快。这些方法不会是全局唯一的,这通常需要在ID中。是的,这不是一个很难实现的概念。另一种方法是在插件函数上存储引用计数,并在每次调用时递增。我曾经/现在希望有一种更正式的方法,能够抓住我没有想到的任何边缘案例。我理解并同意采用一种更“本土”的方法!我也对更好的答案感兴趣…(感谢您提供的信息/代码,值得投上一票,以防这不明显)我从来都不需要这样的答案。。。你会用它做什么?请记住:jQuery处理元素集,而Prototype处理单个元素——您最好调整逻辑以适应此模型;我花了6个月的时间在原型上。我最初编写了一个jQuery小部件/插件,它在单个页面元素上运行,使用#id连接处理程序。我想,扩展代码对集合进行操作的最简单方法是使用identification函数。如果您仍然关心10k另一端的rep,则在回答中删除您的评论显然是错误的。这是我最初的想法,但如果只有名为“test_2”的元素,它将直接跳到“test_3”,而不执行“test_1”-我不确定这是否是需要的。是的,这是因为“each”调用中的“I”参数。为了避免这个问题,我删除了它。代码很有效,也很受欢迎,但我仍然在寻找一些已经存在了一段时间并在野外证明了自己的东西(这绝不是对你提供的代码的批评)。在写这篇文章之前,我浏览了jQuery网站,找不到任何东西,但我从你那里得到了它。不过,我想我涵盖了一切。