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

时间:2010-07-12 03:36:20

标签: javascript jquery html enumeration

我有基于小部件的网页,我给了所有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吗?

4 个答案:

答案 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"]);