隐藏Bootstrap list-group-item

时间:2014-07-19 03:44:40

标签: jquery css twitter-bootstrap

所以我正在使用JQuery为列表组创建实时搜索类型的东西。

我的搜索工作正常,我使用hide()来隐藏与当前搜索不匹配的list-group-items,但是,因为我只隐藏元素,第一个和最后一个列表项(在原始列表)保留第一个子级和最后一个子级状态,从而保持边界半径并使搜索结果列表的第一个和最后一个项目不具有边界半径,除非它们是原始之一。我想知道将边界半径添加到第一个和最后一个非隐藏列表组项目的最佳方法是什么。

以下是我所谈论的内容:http://www.bootply.com/M6g7cEeRon

1 个答案:

答案 0 :(得分:2)

将此代码放在$(".list-group-item").each(function() {});下面,这是我的[小提琴] ..(http://jsfiddle.net/HmrJz/1/

$(".list-group-item:visible").each(function(index) {
     if(index == 0){
         $(this).css("border-top-left-radius", "10px");
         $(this).css("border-top-right-radius", "10px");
     }
     if(index == $(".list-group-item:visible").length - 1){
         $(this).css("border-bottom-left-radius", "10px");
         $(this).css("border-bottom-right-radius", "10px");
     }
 });