根据锚中的标签添加样式

Question

i have some links in a list( li ) there may be one,two or three li in the ul . The li again has <a> and some anchors contains text or icons

Here is codes

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

What i want

if there is both two li has i the a will have border-radius:25px but if there is one i and one text or both are text the a will have border-radius:0px

Here is my try

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'
                })
            }
          }
     })

Answer 1

Maybe something like this:

$('ul').each(function(ind, ele){
    var $ul = $(ele),
        doRad = $ul.find('a > i').length > 1;
    if(doRad){
        $ul.find('a').css('border-radius', '25px');
    }
});

Answer 2

 $('ul').each(function() { if ($('i', $(this)).length > 1) { $('a',$(this)).css('border-radius','10px') } }); 

 i, a { display: block; width: 30px; height: 30px; background: red; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href="#">prev</a></li> <li><a href="#">Next</a></li> </ul> <ul> <li><a href="#"><i class="fa-left"></i></a></li> <li><a href="#">Next</a></li> </ul> <ul> <li><a href="#"><i class="fa-left"></i></a></li> <li><a href="#"><i class="fa-right"></i></a></li> </ul>