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

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;
}