查找具有 display: block 的最后一个可见 div

Question

我正在尝试找到显示为 display: block 的最后一个 div，以便我可以向此 div 添加一个 border-bottom。你可以看到为什么，使用 this JSFiddle

尝试在文本框中键入 "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>

Answer 1

你可以用CSS来实现

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

Answer 2

将 border-top: 1px solid black; .cust-info class 上的规则替换为 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;
}

Answer 3

只使用 .cust-info:last-child 怎么样

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

查找具有 display: block 的最后一个可见 div

Find last visible div that has display: block

html

css

jquery

children

angularjs