[英]Adding style based on a tag in anchor
我在列表中有一些链接( li
) ul
可能有一个,两个或三个li
。 li
再次具有<a>
并且一些锚点包含文本或图标
<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>
如果同时有两个li
有i,则a
border-radius:25px
但是如果有一个i
和一个text
或两者均为text,则a
border-radius:0px
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'
})
}
}
})
也许是这样的:
$('ul').each(function(ind, ele){
var $ul = $(ele),
doRad = $ul.find('a > i').length > 1;
if(doRad){
$ul.find('a').css('border-radius', '25px');
}
});
$('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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.