找到有显示的最后一个可见div：块

我试图找到与display: block一起显示的最后一个div，以便我可以将border-bottom添加到此div。你可以看到为什么，使用this JSFiddle 找到有显示的最后一个可见div：块

尝试在文本框中输入“Dan”或“Alfredo”作为问题的示例。

<!doctype html> 
<html ng-app> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     font-family: Helvetica, sans-serif; 
     } 
     #customers { 
     margin-top: 20px; 
     width: 300px; 
     margin-right: auto; 
     margin-left: auto; 
     } 
     #nameSearch { 
     width: 300px; 
     outline: none; 
     height: 30px; 
     font-size: 17px; 
     text-align: center; 
     border: 1px solid black; 
     margin: 0; 
     padding: 0; 
     } 
     .cust-info > p { 
     margin: 0px; 
     line-height: 35px; 
     } 
     .cust-info { 
     text-align: center; 
     height: 30px; 
     width: 300px; 
     border-top: 1px solid black; 
     border-right: 1px solid black; 
     border-left: 1px solid black; 
     display: none; 
     } 
     #search-result { 
     width: 301px; 
     height: 124px; 
     } 
     .cust-info:nth-child(1), 
     .cust-info:nth-child(2), 
     .cust-info:nth-child(3), 
     .cust-info:nth-child(4){ 
     display: block; 
     } 
     .cust-info:nth-child(1) { 
     border-top: 0px solid white; 
     } 
     .cust-info:nth-child(4) { 
     border-bottom: 1px solid black; 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    </head> 
    <body ng-init="customers=[{name:'Roemer Blom', city:'Utrecht'}, {name:'Peter Rusell', city:'Amsterdam'}, {name:'John deere', city:'Den Haag'}, {name:'Richard Kowinski', city:'Leiden'}, {name:'John Silver', city:'Delft'}, {name:'Dan Aniston', city:'Leiden'}, {name:'Alfredo Querida', city:'Mexico-Stad'}, {name:'Dani Alves', city:'New York'}, {name:'Harvey Cook', city:'New York'}, {name:'Mike Ross', city:'Texas'}, {name:'Michelle Donalds', city:'Neimegen'}, {name:'Cathy Treys', city:'Nieuwegein'}, {name:'Lucy O\'Neil', city:'Nevada'}, {name:'Patrick Blom', city:'Utrecht'}, {name:'Coco Chanel', city:'Amsterdam'}, {name:'Jimi Hendrix', city:'Den Haag'}, {name:'Steve Jobs', city:'Leiden'}, {name:'Susane Boyle', city:'Delft'}, {name:'George Bush', city:'Leiden'}, {name:'Susie Waters', city:'Mexico-Stad'}, {name:'Dan Perkins', city:'New York'}, {name:'Mitchel Green', city:'New York'}, {name:'Leroy Fericho', city:'Long Island'}, {name:'Gus McGregor', city:'Neimegen'}, {name:'Ronnie Sullivan', city:'Nieuwegein'}, {name:'Vivian Sherbert', city:'Nevada'}]"> 
    <div id="customers"> 
    Name: 
    <br> 
    <input type="text" id="nameSearch" ng-model="name"> 
    <div id="search-result"> 
    <div class="cust-info" ng-repeat="cust in customers | filter:name | orderBy:'name'"> 
     <p>{{ cust.name }} - {{ cust.city }}</p> 
    </div> 
    </div> 
    </div> 
    </body> 

</html>

来源

2015-02-24 Roemerdt

您可以使用CSS来实现它

.cust-info:last-child { 
    border-bottom: 1px solid black; 
}

来源

2015-02-24 19:28:31 slashsharp

感谢您的帮助！ – Roemerdt 2015-02-24 19:45:59

更换你border-top: 1px solid black;规则上.cust-info类border-bottom: 1px solid black;。

CSS：

.cust-info { 
    text-align: center; 
    height: 30px; 
    width: 300px; 
    border-right: 1px solid black; 
    border-left: 1px solid black; 
    border-bottom: 1px solid black; 
    display: none; 
}

来源

2015-02-24 19:30:57

这工作，谢谢！ – Roemerdt 2015-02-24 19:44:46

如何只使用.cust-信息：最后一个孩子

.cust-info:nth-child(4),.cust-info:last-child { 
    border-bottom: 1px solid black; 
    }

来源

2015-02-24 19:32:18 Vadim

找到有显示的最后一个可见div：块

回答

相关问题