如何枚举所有具有相同id的div标签？

Question

我有基于小部件的网页，并且我为所有 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 个小部件），并获取 id 与小部件中的“tooltip-content”匹配的所有 div。一个小部件有 5 或 6 个工具提示内容。你能帮我枚举一下div吗？

Answer 1

ID 在文档中应该是唯一的；每个 ID 只能有一个元素。请参阅 w3schools

该 ID 在 HTML 文档中必须是唯一的。

您想要做的是在每个元素上使用 class 属性，然后根据类名称进行选择。如果您使用的是 Prototype、jQuery 或 Ext（或您喜欢的其他框架）等框架，则应该有一种通过 CSS 选择器或类名选择元素的方法。我建议您向每个元素添加一个名为 widget 的类，并为它们提供唯一的 ID，

Answer 2

我给所有的div赋予了相同的ID

这是你的问题。根据定义，id 必须是唯一的。如果它不是唯一的，那么您会遇到各种各样的问题（例如，无法轻松枚举它们）。相反，您可以使用 class 属性（单个元素可以通过用空格分隔多个类来拥有多个类，因此 class="widget span-8" 就可以了）。

然后，您可以使用 jQuery 的基于类的选择器来轻松枚举：

$(".widget").each(function() {
    ...
});

Answer 3

从技术上讲，元素 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;
}

Answer 4

大多数网络浏览器将“id”属性作为特殊属性处理，该属性意味着单个哈希查找。您不应将相同的 id 分配给多个元素。

我建议分配一个不同的属性，也许是“widget_id”。

完成此操作后，您可以通过以下方式枚举具有给定“widget_id”的所有元素：

$(div[widget_id="tooltip-content"]);