как перечислить все теги div с одинаковым идентификатором?

Question

У меня есть веб-страницы, основанные на виджетах, и я дал всему div тот же атрибут идентификатора. После того, как страница загружена, я хочу перечислить все элементы div, которые соответствуют элементу 'widget' идентификатора. Я использую jQuery.

Затем я хочу получить внутренний атрибут div в div 'widget', который будет использоваться в качестве всплывающей подсказки.

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

В основном я хочу, чтобы получить все виджеты с идентификатором «виджетами» (у меня есть около 20 виджетов на страницу) и получить все DIV каких Совпадение ID «подсказка-контент» в виджете. Один виджет имеет 5 или 6 подсказок. Можете ли вы помочь мне перечислить div?

Answer 1

Технически элемент идентификаторов всегда должен быть уникальным, да, вы можете иметь элементы с одинаковыми идентификаторами, но вы столкнетесь с проблемами, как это , Где движок селектора jQuery ожидает только один элемент с заданным идентификатором, так что что в итоге произойдет, он найдет первый элемент и проигнорирует остальные.

Что вы должны сделать, это дать им все тот же класс Е.Г.

class="widget" 

и селектор будет

$(".widget") 

EDIT: ах да по какой-то причине, я думал, что вы упомянули вы используете 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 2

Идентификаторы должны быть уникальными в документе; вы должны иметь только один элемент для каждого идентификатора. См. w3schools

Идентификатор должен быть уникальным в документе HTML.

Что вы хотите сделать, это использовать атрибут class для каждого из этих элементов, а затем выбрать его на основе имени класса. Если вы используете фреймворк, такой как Prototype, jQuery или Ext (или другой, который вы предпочитаете), должен быть метод для выбора элементов с помощью селектора CSS или по имени класса. Я рекомендую вам добавить класс под названием widget к каждому из этих элементов, и дать им уникальные идентификаторы вместо

Answer 3

Я дал все Div тот же идентификатор

Это ваша проблема. Идентификатор, по определению, должен быть уникальным. Если это не уникально, вы сталкиваетесь со всеми проблемами (например, неспособными их перечислить, например). Вместо этого вы можете использовать атрибут class (один элемент может иметь несколько классов, разделяя их пробелами, поэтому class="widget span-8" в порядке).

Затем можно использовать селектор класса на основе JQuery для удобного перечисления:

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

Answer 4

Большинство веб-браузеров любой библиотеки обрабатывать «ID» атрибут как специальный атрибут, который предназначен, чтобы быть один хэш-поиска. Вы не должны назначать один и тот же идентификатор нескольким элементам.

Я бы рекомендовал назначить другой атрибут, возможно, «widget_id».

После того, как вы сделаете это, вы можете перечислить все элементы с заданным «WIDGET_ID» с помощью:

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