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个小部件）并获得所有与小部件中的'tooltip-content'匹配的div。一个小部件有5或6个工具提示内容。你能帮我列举一下div吗？

Answer 1

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

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

您要做的是在每个元素上使用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

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

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

一旦这样做，您可以通过以下方式枚举具有给定“widget_id”的所有元素：

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

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

4 个答案: