JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<body>
    <div class="parent">
        <div class="one child" id="first"></div>
    </div>
    <div class="parent">
          <div class="one child" id="second"></div>
    </div>
    <div class="parent">
          <div class="one child" id="third"></div>
    </div>
    <div class="parent">
          <div class="one child" id="fourth"></div>
          <div class="one child" id="fifth"></div>
          <div class="one child" id="sixth"></div>
          <div class="one child" id="seventh"></div>
    </div>
    <div class="parent">
          <div class="one child" id="eight"></div>
    </div>
</body>

CSS

.parent {
    width:200px;
    border:solid 5px #c30;
    padding:10px;
    margin:0 0 10px 0;
}
.child {
    min-height:50px;
    background:#369;
    padding:10px;
    margin:0 0 10px 0;
}
.child:last-child {
    margin:0;
}
.navigation {
    display:block
}
.navigation li {
    display:block;
}
.navigation li a {
    display:block;
    width:10px;
    margin:0 0 10px 0;
    height:10px;
    border-radius:5px;
    background:#939;
}

JavaScript

$('body').append('<ul class="navigation"></ul>');

$('.parrent').each(function(){

      $('body').text( '-- we have a parrent' );

      if ( $(this).has('.child') ) {

            $(this).find('.child').each(function(){

                  if ( $('.child').length > 0 ) {

                        $('body').text('** thir parent has lots of children **');

                  }

                  var idSlide = $(this).attr('id');
                  console.log ('containes the child - ' + idSlide );

                  $('.navigation').append('<li><a href="#' + idSlide + '"></a></li>');

            });

      }

});

$('body').append('<ul class="navigation"><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>');