這讓我忙了幾天。如何檢測類名“is”中的第一個或最后<td>一個<tr>,然后將此類更改為“isf”(行中的第一個)或“is”(行的最后一個),保持中間的“is”類保持原樣?
到目前為止,我已經使用 jQuery 得到了這個,但沒有任何反應:
$( document ).ready(function() {
if ($("td.is").prevAll("td.is") = null) {
$("td.is").toggleClass('is isf');
} else if ($("td.is").nextAll("td.is") = null) {
$("td.is").toggleClass('is isl');
}
});
更改.prevAll()為.prev()對我不起作用。我在不同的單元格上有多個帶有“is”類的表格行。這是表格行的樣子:
<tr class="row-months">
<td class="cell-month cell-jan jan1"></td>
<td class="cell-month cell-jan jan2"></td>
<td class="cell-month cell-feb feb1"></td>
<td class="cell-month cell-feb feb2"></td>
<td class="cell-month cell-mar mar1"></td>
<td class="cell-month cell-mar mar2 is"></td> <!-- FIRST "is" class in row, change "is" to "isf" -->
<td class="cell-month cell-apr apr1 is"></td>
<td class="cell-month cell-apr apr2 is"></td>
<td class="cell-month cell-may may1 is"></td>
<td class="cell-month cell-may may2 is"></td>
<td class="cell-month cell-jun jun1 is"></td>
<td class="cell-month cell-jun jun2 is"></td>
<td class="cell-month cell-jul jul1 is"></td>
<td class="cell-month cell-jul jul2 is"></td>
<td class="cell-month cell-aug aug1 is"></td> <!-- LAST "is" class in row, change "is" to "isl" -->
<td class="cell-month cell-aug aug2"></td>
<td class="cell-month cell-sep sep1"></td>
<td class="cell-month cell-sep sep2"></td>
<td class="cell-month cell-oct oct1"></td>
<td class="cell-month cell-oct oct2"></td>
<td class="cell-month cell-nov nov1"></td>
<td class="cell-month cell-nov nov2"></td>
<td class="cell-month cell-dec dec1"></td>
<td class="cell-month cell-dec dec2"></td>
</tr>
uj5u.com熱心網友回復:
為此,您可以遍歷每個元素并tr使用:first和:last選擇器來檢索相關.is元素并更新它們的類:
$('.row-months').each((i, el) => {
$(el).find('.is:first').toggleClass('is isf');
$(el).find('.is:last').toggleClass('is isl');
});
td {
width: 30px;
vertical-align: top;
}
.is { color: #CCC; }
.isf { color: #0C0; }
.isl { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="row-months">
<td class="cell-month cell-jan jan1">jan1</td>
<td class="cell-month cell-jan jan2">jan2</td>
<td class="cell-month cell-feb feb1">feb1</td>
<td class="cell-month cell-feb feb2">feb2</td>
<td class="cell-month cell-mar mar1">mar1</td>
<td class="cell-month cell-mar mar2 is">mar2 is</td>
<td class="cell-month cell-apr apr1 is">apr1 is</td>
<td class="cell-month cell-apr apr2 is">apr2 is</td>
<td class="cell-month cell-may may1 is">may1 is</td>
<td class="cell-month cell-may may2 is">may2 is</td>
<td class="cell-month cell-jun jun1 is">jun1 is</td>
<td class="cell-month cell-jun jun2 is">jun2 is</td>
<td class="cell-month cell-jul jul1 is">jul1 is</td>
<td class="cell-month cell-jul jul2 is">jul2 is</td>
<td class="cell-month cell-aug aug1 is">aug1 is</td>
<td class="cell-month cell-aug aug2">aug2</td>
<td class="cell-month cell-sep sep1">sep1</td>
<td class="cell-month cell-sep sep2">sep2</td>
<td class="cell-month cell-oct oct1">oct1</td>
<td class="cell-month cell-oct oct2">oct2</td>
<td class="cell-month cell-nov nov1">nov1</td>
<td class="cell-month cell-nov nov2">nov2</td>
<td class="cell-month cell-dec dec1">dec1</td>
<td class="cell-month cell-dec dec2">dec2</td>
</tr>
<tr class="row-months">
<td class="cell-month cell-jan jan1">jan1</td>
<td class="cell-month cell-jan jan2">jan2</td>
<td class="cell-month cell-feb feb1">feb1</td>
<td class="cell-month cell-feb feb2">feb2</td>
<td class="cell-month cell-mar mar1">mar1</td>
<td class="cell-month cell-mar mar2">mar2</td>
<td class="cell-month cell-apr apr1">apr1</td>
<td class="cell-month cell-apr apr2">apr2</td>
<td class="cell-month cell-may may1">may1</td>
<td class="cell-month cell-may may2">may2</td>
<td class="cell-month cell-jun jun1">jun1</td>
<td class="cell-month cell-jun jun2">jun2</td>
<td class="cell-month cell-jul jul1 is">jul1 is</td>
<td class="cell-month cell-jul jul2 is">jul2 is</td>
<td class="cell-month cell-aug aug1 is">aug1 is</td>
<td class="cell-month cell-aug aug2 is">aug2 is</td>
<td class="cell-month cell-sep sep1 is">sep1 is</td>
<td class="cell-month cell-sep sep2 is">sep2 is</td>
<td class="cell-month cell-oct oct1">oct1</td>
<td class="cell-month cell-oct oct2">oct2</td>
<td class="cell-month cell-nov nov1">nov1</td>
<td class="cell-month cell-nov nov2">nov2</td>
<td class="cell-month cell-dec dec1">dec1</td>
<td class="cell-month cell-dec dec2">dec2</td>
</tr>
</table>
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/326173.html
標籤:查询 html-table 班级名称
上一篇:不斷檢查類是否存在
