I have a list of links (li) with one, two, or three li elements in the ul. Each li contains an <a> tag with text or icons.
Below are some code examples:
<ul>
<li><a href="#">prev</a></li>
<li><a href="#">Next</a></li>
</ul>
or
<ul>
<li><a href="#"><i class="fa-left"></i></a></li>
<li><a href="#">Next</a></li>
</ul>
or
<ul>
<li><a href="#"><i class="fa-left"></i></a></li>
<li><a href="#"><i class="fa-right"></i></a></li>
</ul>
Desired Outcome
If both li elements contain an icon within the a tag, then the a element should have a border-radius of 25px. If one has an icon and one has text, or both have text, then the a element should have a border-radius of 0px.
Attempted Solution
var thumbLinkList = $('li');
var thumbLink = $('li a');
thumbLink.each(function( index,elem ){
if($(this).find('i')){
if($(this).parent().siblings('li').find('i')){
$(this).css({
'border-radius' : '25px'
})
}
}
})