-2

Seguinte, tenho uma série de Lis criadas dinamicamente. O que preciso fazer com JS puro é simplesmente achar o filho da div pai.

Funciona assim: Quando uma data tem uma hora indisponível o sistema avisa.

A data é i ID pai, e os filhos são IDs em horas.

Com Js PURO (estou aprendendo por isso quero puro e não Jquery).

Como fazer para percorrer e achar o ID filho ?

<li style="display:none;" id="12-05-2016">Para o dia: 12-05-2016
    
    <ul><li  id="08:00"> Esta hora esta indisponivel: 08:00</li></ul>

    <ul><li  id="09:00"> Esta hora esta indisponivel: 09:00</li></ul>

</li>

<li style="display:none;" id="13-05-2016">Para o dia: 13-05-2016

</li>

11
  • 4
    Como sabes o que procurar? Vais procurar o elemento filho por id? e de onde sabes se deves procurar por 08:00 ou por 09:00?
    – Sergio
    11/05/2016 às 19:33
  • Essa parte não é problema.
    – Uriel
    11/05/2016 às 19:42
  • Com Js eu á pego os elementos. Da data e hora. Só preciso comparar a data (id) com a hora (id filha)
    – Uriel
    11/05/2016 às 19:43
  • 2
    Não percebi a tua resposta. O que procuras nos elementos filhos? Se queres saber todos podes usar elemento.children. Se procuras um, específico, o que é que procuras nele? pois nesse caso pode haver uma resposta mais acertada.
    – Sergio
    11/05/2016 às 19:45
  • 1
    @Uriel Muito mal feito essa relação de Id. Pode melhorar colocando algo estatico, exemplo "data_12-05-2016" , "hora_08:00" .
    – Matheus
    11/05/2016 às 20:07

2 Respostas 2

1

Assumindo que você tem como obter o ID, segue uma solução proposta. Vale ressaltar que no exemplo, eu mudei o atributo display:none para display:block

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <ul>
    <li style="display:block;" id="12-05-2016">Para o dia: 12-05-2016
      <ul><li  id="08:00"> Esta hora esta indisponivel: 08:00</li></ul>

      <ul><li  id="09:00"> Esta hora esta indisponivel: 09:00</li></ul>
   </li>

    <li style="display:block;" id="13-05-2016">Para o dia: 13-05-2016>

    </li>
  </ul>
  <script type="text/javascript">
    /* Obtém o elemento PAI */
    var elem = document.getElementById("12-05-2016");

     /* Obtém os elementos FILHOS (childNode) filtrando pela ul */
    var subElem = elem.getElementsByTagName("ul");

    /* Apresentar cada item dentro do ChildNode (FILHO)*/
    for(i = 0; i < subElem.length; i++)
      console.log(subElem[i].getElementsByTagName("li")[0]);
  </script>
</body>
</html>
1
  • Obrigado. Fiz uma mudança e resolveu.
    – Uriel
    12/05/2016 às 4:17
0

Uriel seguinte, se você for repetir as horas por exemplo, 08:00 estiver em duas diferentes datas eu aconselho passar essas horas que você quer como classe, ai então utilizar:

var pai = document.getElementById('12-05-2016');
var filhos = pai.getElementsByClassName('08:00');

Pois utilizar o id significa que esse será único (pelo menos é o que se espera). E se não repetir basta utilizar o próprio getElementById.

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 .