css和jquery子節點選擇器
阿新 • • 發佈:2018-12-26
html
<div class="ranklist"> <table class="list-table"> <thead> <tr class="list-table-head"> <th>排名</th> <th>手機號碼</th> <th>盈利率</th> </tr> </thead> <tbody> <tr class="list-table-body"> <td>1</td> <td>151****1111</td> <td>20%</td> </tr> <tr class="list-table-body"> <td>2</td> <td>151****2222</td> <td>20%</td> </tr> <tr class="list-table-body"> <td>3</td> <td>151****3333</td> <td>20%</td> </tr> <tr class="list-table-body"> <td>5</td> <td>151****9999</td> <td>20%</td> </tr> <tr class="list-table-body"> <td>5</td> <td>151****9999</td> <td>20%</td> </tr> </tbody> </table> </div>
jquery
$(".list-table tbody tr:nth(0) td:nth(0)").html("");
$(".list-table tbody tr:nth(1) td:nth(0)").html("");
$(".list-table tbody tr:nth(2) td:nth(0)").html("");
css
.list-table tbody tr:nth-child(1) td:nth-child(1) { background-image: url("../image/psatlist/No-1.png"); background-size: .58666667rem .72rem; background-position: center; background-repeat: no-repeat; } .list-table tbody tr:nth-child(2) td:nth-child(1) { background-image: url("../image/psatlist/No-2.png"); background-size: .58666667rem .72rem; background-position: center; background-repeat: no-repeat; } .list-table tbody tr:nth-child(3) td:nth-child(1) { background-image: url("../image/psatlist/No-3.png"); background-size: .58666667rem .72rem; background-position: center; background-repeat: no-repeat; }
這樣省掉了伺服器端判斷輸出的數量這是出來做出的效果,jquery和css的選擇器別弄混了,不然自己都蒙逼我是小白一個,別噴我。