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

I have web-pages based on widget and I have given all the div the same ID attribute. After the page is loaded, I want to enumerate all the div element which matches the ID element 'widget'. I am using jQuery.

我有基于小部件的网页，我给了所有div相同的ID属性。加载页面后，我想枚举所有与ID元素'widget'匹配的div元素。我正在使用jQuery。

Then I want to get the internal div attribute within the 'widget' div which shall be used as a tooltip.

然后我想得到'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>

Basically I want to get the all the widgets with id 'widget'( I have around 20 widgets per page) and get all the div which id matches 'tooltip-content' within widget. One widget has 5 or 6 tooltip-content. Can you help me to enumerate the divs?

基本上我想用id'widget'获取所有小部件（我每页有大约20个小部件）并获得所有与小部件中的'tooltip-content'匹配的div。一个小部件有5或6个工具提示内容。你能帮我列举一下div吗？

4 个解决方案

#1

Technically element id's should always be unique, yes you can have elements with the same id but you'll run into problems like this. Where jQuery's selector engine is only expecting one element with a given id, so what will end up happening is it will find the first element and ignore the rest.

从技术上讲，元素id应该始终是唯一的，是的，你可以拥有相同id的元素，但是你会遇到这样的问题。其中jQuery的选择器引擎只期望一个具有给定id的元素，所以最终会发生的是它将找到第一个元素并忽略其余元素。

What you should do is give them all the same class eg

你应该做的是给他们所有相同的班级，例如

class="widget"

and the the selector would be

而选择器将是

$(".widget")

EDIT: ah yeah for some reason I thought you mentioned you were using jQuery. but here's a function that will get all elements by ID that doesn't require any library's

编辑：啊是的由于某种原因，我以为你提到你使用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;
}

#2

IDs are supposed to be unique within a document; you are only supposed to have one element per ID. See w3schools

ID应该在文档中是唯一的;你应该每个ID只有一个元素。见w3schools

The id must be unique within the HTML document.

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

What you want to do is use a class attribute on each of those elements, and then select based on a class name. If you are using a framework such as Prototype, jQuery or Ext (or another one that you prefer), there should be a method to select elements by CSS selector or by class name. I recommend you add a class called widget to each of those elements, and give them unique IDs instead,

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

#3

I have given all the div the same ID

我给了所有div相同的ID

This is your problem. The id, by definition, needs to be unique. If it's not unique then you run into all sorts of problems (like not being able to enumerate them easily, for example). Instead, you can use the class attribute (a single element can have multiple classes by separating them with spaces so class="widget span-8" is fine).

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

You could then use jQuery's class-based selector for easy enumeration:

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

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

#4

-1

Most web browsers handle the "id" attribute as a special attribute which is meant to be a single hash lookup. You shouldn't assign the same id to multiple elements.

大多数Web浏览器将“id”属性作为特殊属性处理，这是一个单一的哈希查找。您不应该为多个元素分配相同的ID。

I'd recommend assigning a different attribute, perhaps "widget_id".

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

Once you do that, you can enumerate all elements with a given "widget_id" via:

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

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

#1