我有基于小部件的网页,我给了所有div相同的ID属性。 加载页面后,我想枚举所有与ID元素'widget'匹配的div元素。我正在使用 jQuery 。
然后我想在'widget'div中获取内部div属性,该属性将用作工具提示。
<div id="widget" class="span-8 " >
<h2><a href="">Example.com</a></h2>
<ul>
<li><h3><a href="example.com">Example News 1</a></h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3><a href="example.com">Example News 2</a></h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
基本上我想用id'widget'获取所有小部件(我每页有大约20个小部件)并获得所有与小部件中的'tooltip-content'匹配的div。一个小部件有5或6个工具提示内容。你能帮我列举一下div吗?
答案 0 :(得分:7)
ID应该在文档中是唯一的;你应该每个ID只有一个元素。见w3schools
在HTML文档中,id必须是唯一的。
您要做的是在每个元素上使用class
属性,然后根据类名进行选择。如果你使用的是Prototype,jQuery或Ext(或你喜欢的另一个)这样的框架,那么应该有一个通过CSS选择器或类名选择元素的方法。我建议您为每个元素添加一个名为widget
的类,并为它们提供唯一的ID,
答案 1 :(得分:6)
我已经为所有div提供了相同的ID
这是你的问题。根据定义,id必须是唯一的。如果它不是唯一的那么你会遇到各种各样的问题(比如不能轻易地枚举它们)。相反,您可以使用class
属性(单个元素可以通过用空格分隔多个类来使class="widget span-8"
正常)。
然后,您可以使用jQuery基于类的选择器来轻松枚举:
$(".widget").each(function() {
...
});
答案 2 :(得分:2)
技术上元素id应该始终是唯一的,是的,你可以拥有相同id的元素,但是你会遇到这样的问题。其中jQuery的选择器引擎只期望一个具有给定id的元素,所以最终会发生的是它会找到第一个元素并忽略其余元素。
你应该做的就是给他们所有相同的课程,例如
class="widget"
,选择器将是
$(".widget")
编辑:啊,是的,由于某种原因,我以为你提到你使用的是jQuery。但这是一个函数,它将通过ID获取所有元素,不需要任何库
/*
* ElementsById
*
* Author: Diego Perini
* Updated: 07/12/2006
* Version: 0.0 (from parent)
*
* Extracted from latest IPORT/STYLER engines.
*
* Returns an array of elements with specified ID.
*/
function ElementsById($id) {
var c = 0, i = 0, j = 0, k = 0;
var nodes=[], storage = arguments.callee.storage;
var elements = document.getElementsByTagName('*');
var length = elements.length;
if (storage &&
storage.nodes &&
storage.length == length &&
storage.first == elements[0] &&
storage.last == elements[length-1]) {
k = $id;
while (storage.nodes[k]) {
nodes[nodes.length] = storage.nodes[k];
k = $id + '*' + (++i);
}
} else {
storage = { };
storage.nodes = { };
storage.length = 0;
storage.first = elements[0];
storage.last = elements[length - 1];
while (length > i) {
c = elements[i];
if ((k = c.id) == $id) {
nodes[nodes.length] = c;
if (storage.nodes[k]) {
k = c.id + '*' + (++j);
}
}
i++;
storage.nodes[k] = c;
storage.length++;
}
arguments.callee.storage = storage;
}
return nodes;
}
答案 3 :(得分:-1)
大多数Web浏览器将“id”属性作为特殊属性处理,该属性意味着单个哈希查找。您不应该为多个元素分配相同的ID。
我建议指定一个不同的属性,也许是“widget_id”。
一旦这样做,您可以通过以下方式枚举具有给定“widget_id”的所有元素:
$(div[widget_id="tooltip-content"]);