Get HTML from multiple Divs with the same ID

Asked

Viewed 3,248 times

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

2 answers

7

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.

  • I edited the "class" attributes as it is recommended not to use only numbers or start with numbers. http://www.w3schools.com/css/css_selectors.asp

  • @Danielomine thanks for the intention, but in fact classes can start with numbers. This discussion was even more heated with id, but so far with HTML5 the problem has been solved and can use numbers freely.

  • We are still far from having HTML4 and CSS2 as obsolete.

  • Thank you, Doctor, when you get home I’ll test... Regarding the ID with numbers, was to give the example... already the issue of Divs with the same id, this occurs because it is a web page, where I have to take the content... I was not the one who developed...

  • @Danielomine truth.

  • @abcd if you can’t change the other page (which is worrying) tests the "bullshit" solution that I suggested. She assumes that these div are direct descendants of body etc. If you need help implementing do a jsFiddle with the original HTML you have to work with to see.

  • @Sergio I managed to accomplish what you want using the find() and each, how it returns what it has inside the div it selected, I get the ID $(this).attr('id') and changed the new class I created... In the child question, I did a validation, if there was class 3, I create a receiving variable TRUE, then she’ll only get false when a new one arrives class title... ATT

  • @abcd I’m glad you solved the problem. If you want you can mark as accepted one of the answers or put a response from you if it is different from what we suggest.

Show 3 more comments

1

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.