Get HTML from multiple Divs with the same ID

Question

I would like to know how to get content from a WEB page where I have several Divs with the same Ids. One looks like the other, the div 1, is like a Titulo, already a Div 2 as if it were the content...

But the problem that the div 2 may have several, one under the other, before the next div 1.

How do I get these Ids with these Ids?

After I took that Div 2, i have to verify if the first element within it possessed the class DIV_3, if she has this element, I have to skip all the divs 2 and go straight to the next div 1...

I have an object, with all the HTML content of the site:

<div id="1"></div>
<div id="2">
   <div class="3"></div>
   <div class="10"></div>
</div>
<div id="2">
    <div class="10"></div>
    <div class="10"></div>
    <div class="10"></div>
</div>
<div id="1"></div><!--Próxima DIV 1-->

You see, first I need to separate all the Divis from one object with the ID 1 e 2:

After separating they would have an HTML similar to the one above ( But with much more DIV 1 e Div 2), then I have to make a check, case the first DIV 2, has within it a class DIV 3, I have to jump right into the next DIV 1...

I tried with find, but did not succeed, first the find picks up what is inside, and first I need to separate from the whole object, the DIVs 1 e DIVs 2...

If anyone can give a push... ATT

Answer 1

In HTML the id must be unique. It is one of the rules of language.

Also note that the native method for selecting an element by id is getElementById, singular and will return 1 element, the first one you find, regardless of how many elements you have on the page with the same ID. The same jQuery, returns only the first one you find.

Of course you can cheat and use:

var id = {}
$('body > div').each(function(){
    if (id[this]) id[this].push(this);
    else id[this.id] = [this]; 
});

and then iterate the elements of that object which groups elements by id. Honestly only does that if you don’t know what you’re doing.

The solution:

Changes in HTML these id for class. Your HTML could look like this:

<div class="title"></div>
<div class="content">
   <div class="3"></div>
   <div class="10"></div>
</div>
<div class="content">
    <div class="10"></div>
    <div class="10"></div>
    <div class="10"></div>
</div>

and then what you need to do with Javascript/jQuery is:

to capture the elements title

$('.title')

to capture the content elements that have a div classy 3:

$('.title > .3').map(function(){ return $(this).parent(); });

Note:

Like @Danielomine referred to, And well, you should use classes that start with letters. Although it is accepted in HTML5 and CSS3 classes that start with digits, there are still many people with old browsers.

Answer 2

The first thing I see is that you’re wearing IDs equal. The idea would be the use of classes and not of IDs, for every ID is unique on the page.

In your code, you have something like the below, and the comments show what happens on the page.

Div I1 { //Perdeu o ID!
  Div I2 { //Perdeu o ID!
    Div C3
    Div C10
  }
  Div I2 {
    Div C10
    Div C10
    Div C10
  }
}
Div I1 { }

IX = ID X

CX = Class X

For example, the CSS below:

.1 /*atenção ao espaçamento!*/ #ident { //regras
}

Make him take the element with ID ident inside an element with the class 1 and apply the determined CC rules in the file/tag...