JSFiddle - React, Tailwind, and code Playground

by felipepalazzo

HTML

<div class="banners-thumbs">
                    <ul>
                        <li class="suck">
                            <div id="line-wrap"><div id="line"></div></div>
                            <a href="#banner1"><img src="http://www.fiveblu.com.br/img/home/dia-dos-namorados-12-tn.jpg" /></a>
                        </li>
                        <li class="suck">
                            <div id="line-wrap"><div id="line"></div></div>
                            <a href="#banner2"><img src="http://www.fiveblu.com.br/img/home/campanha-inv-12-tn.jpg" /></a>
                        </li>
                        <li class="suck">
                            <div id="line-wrap"><div id="line"></div></div>
                            <a href="#banner3"><img src="http://www.fiveblu.com.br/img/home/lookbook-inv-12-tn.jpg" /></a>
                        </li>
                        <li class="suck">
                            <div id="line-wrap"><div id="line"></div></div>
                            <a href="#banner4"><img src="http://www.fiveblu.com.br/img/home/blog-tn.jpg" /></a>
                        </li>
                    </ul>
                </div>

CSS

ul li{
display: inline;
}
#line,
#line-wrap{
width: 238px;
    height: 5px;
    background: black;
}
#line{
 background: blue;
width: 100px;    
}

JavaScript

$('#line a').css('border', 'solid 1px red');

var say = $('#line').parents('li').children('a').attr('href'); //.css('border', 'solid 2px red'); 

alert(say);