Select Element from a div tag

Question

How can I select the first tag with center id name in sample below code?

<div id=first>
     <div id=center></div>
</div>
<div id=first>
     <div id=center></div>
</div>

Answer 1

ids are meant to be unique. Correct your html first.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

Answer 2

You don't, that is not standard HTML.

The id attribute specifies a unique id for an HTML element. The id must be unique within the HTML document.

http://www.w3schools.com/tags/att_standard_id.asp

Answer 3

div = document.getElementById("center");

I'm assuming you copy-pasted twice which is why the code is duplicated. If not, you need to change those IDs to classes (ID must be unique in a document).

Also, put quotes around attributes (id="center")

Answer 4

First thing, "id"s are unique, meaning you should never have two tags with the same id. You should use classes instead, which are meant for tags that have several things in common.

Second, I would look over XHTML validation, as that above is invalid:

http://www.w3schools.com/xhtml/

I don't know if that will solve your problem or not. If you are using jQuery you can do something simple such as:

$('.center:first')

Your HTML would look something like this:

<div class="first">
     <div class="center"></div>
</div>
<div class="first">
     <div class="center"></div>
</div>

Answer 5

You can use Prototype to select that element - however it is not valid HTML to name different nodes the same id.

using Prototype to select the first one using your code

$$("#center")[1];

If you need to keep them together use a class then you can loop through them like this

$$(".center").each(function(item){
  //Fun scripts
});