how to enumerate all the div tag with same id?

Question

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.

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

<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?

Answer 1

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

The id must be unique within the HTML document.

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,

Answer 2

I have given all the div the same 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).

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

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

Answer 3

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.

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

/*
 * 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

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.

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

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

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