1

Gostaria de saber como faço para obter conteúdo de uma pagina da WEB onde tenho várias DIVs com os mesmo IDs. Uma parece a outra, a div 1, é como se fosse um Titulo, já a Div 2 como se fosse o conteúdo...

Mas o problema que a div 2 pode ter diversas, uma debaixo da outra, antes de vir a proxima div 1.

Como eu faço para pegar essas divs com esses IDs?

Após eu pegar essa Div 2, eu tenho que veridicar se o primeiro elemento dentro dela possuí a class DIV_3, caso ela tenha esse elemento, eu tenho que pular todas as divs 2 e ir direto para a próxima div 1...

Eu tenho um objeto, com todo o conteúdo HTML do 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-->

Entende, primeiro preciso separar todas as divis de um objeto com os ID 1 e 2:

Depois de separar eles teriam um HTML semelhante ao de cima ( Mas com muito mais DIV 1 e Div 2), daí eu tenho que fazer uma verificação, caso a primeira DIV 2, tenha dentro dela uma class DIV 3, eu tenho que pular diretamente para a próxima DIV 1...

Eu tentei com find, mas não obtive sucesso, primeiro que o find pega o que tem dentro, e primeiro eu preciso separar de todo o objeto, as DIVs 1 e DIVs 2...

Se alguém puder dar uma força... ATT

2 Respostas 2

7

Em HTML os id têm de ser unicos. É uma das regras da linguagem.

Repara ainda que o método nativo para selecionar um elemento por id é getElementById, no singular e vai retornar 1 elemento, o primeiro que encontrar, independentemente de quantos elementos tenhas na página com o ID igual. O jQuery igual, retorna somente o primeiro que encontrar.

Claro que podes fazer aldrabice e usar:

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

e depois iterar os elementos desse objeto qua agrupa elementos por id. Sinceramente só faz isso quem não sabe o que está a fazer.

A solução:

Muda no HTML esses id para class. O teu HTML poderia ficar assim:

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

e depois o que precisas fazer com JavaScript/jQuery é:

para capturar os elementos title

$('.title')

para capturar os elementos content que têm uma div com classe 3:

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

Nota:

Como o @DanielOmine referiu, e bem, convém usar classes que começam por letras. Apesar de ser aceite no HTML5 e CSS3 classes que começam por digitos, ainda há muita gente com browsers antigos.

8
  • editei os atributos "class" pois é recomendável não usar somente números ou iniciar com números. w3schools.com/css/css_selectors.asp Commented 9/04/2015 às 7:49
  • @DanielOmine obrigado pela intenção, mas na verdade as classes podem começar com numeros. Essa discussão foi mais acesa ainda com id, mas até aí com HTML5 o problema foi resolvido e pode usar-se numeros livremente.
    – Sergio
    Commented 9/04/2015 às 7:56
  • Estamos ainda longe de ter o HTML4 e CSS2 como obsoletos. Commented 9/04/2015 às 8:02
  • obrigado sergio, quando chegar em casa vou testar... Em relação ao ID com números, foi paracdar o exemplo... já a questão das divs com o mesmo id, isso ocorre pois é uma página web, onde tenho que pegar o conteúdo... não fui eu quem desenvolveu...
    – abcd
    Commented 9/04/2015 às 9:36
  • @DanielOmine verdade.
    – Sergio
    Commented 9/04/2015 às 10:46
1

A primeira coisa que estou vendo é que você está usando IDs iguais. A ideia seria o uso de classes e não de IDs, pois cada ID é único na página.

No seu código, você tem algo como o abaixo, e os comentários mostram o que ocorre na página.

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

Por exemplo, o CSS abaixo:

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

Faz com que ele pegue o elemento com ID ident que esteja dentro de um elemento com a classe 1 e aplique as regras de CC determinadas no arquivo/tag...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .