Get HTML from multiple DIVs with the same ID

Question

Get HTML from multiple DIVs with the same ID

Navigation

#1 by (7 votes)
#2 by (1 votes)

1

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, div 1 , it's like a Title, already the Div 2 as if it were the content ...

But the problem that div 2 can have several, one underneath the other, before coming to the next div 1 .

How do I get these divs with these IDs?

After I get this Div 2 , I have to check if the first element inside it has the class DIV_3 , if it has this element, I have to skip all 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-->

Understand, first I need to separate all divisions of an object with the ID 1 e 2 :

After separating they would have an HTML similar to the one above (but with a lot more DIV 1 e Div 2 ), so I have to do a check, if the first DIV 2 , has a DIV 3 inside it, I have which jump directly to the next DIV 1 ...

I tried with find, but I did not succeed, first that find takes what's inside, and first I need to separate from the whole object, DIVs 1 e DIVs 2 ...

If anyone can give a force ... ATT

html jquery

asked by anonymous 09.04.2015 / 04:24

2 answers

How can I make a program that answers a mathematical formula? [closed] Button / link within a view redirecting to another view

score 7 · Answer 1

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

Also note that the native method to select an element by id is getElementById, in the singular and will return 1 element, the first one to find, regardless of how many elements you have on the page with the same ID. JQuery equal, returns only the first one it finds.

Of course you can swear 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 that groups elements by id . Honestly, this is only done by those who do not know what they are doing.

The solution:

Change these id to class in HTML. 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>

Then what you need to do with JavaScript / jQuery is:

to capture elements title

$('.title')

to capture content elements that have div with class 3 :

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

Note:

How to @DanielOmine mentioned , and well, you might want to use classes that start with letters. Although HTML5 and CSS3 classes that start with digits are accepted, there are still a lot of people with older browsers.

score 1 · Answer 2

The first thing I'm seeing is that you're using IDs equal. The idea would be to use classes and not IDs , since every ID is unique on the page.

In your code, you have something like the one 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
}

Causes it to take the element with% ident that is inside an element with class 1 and apply the given CC rules in the / tag ...