javascript - querySelector() 不适用于所有类

Question

我的第一列应该是实际日期，但我的 js 脚本仅适用于我的 html 代码中的一个类。

问题:如何使我的js代码适用于html代码中的每个类，我使用querySelector()，但我应该使用类似$(this)的东西，但我不知道如何.

var time = document.querySelector(".table_si_cell_stat-date");

time.innerHTML =new Date().toLocaleDateString([], {year:'numeric', month: 'long', day:'numeric', hour:'2-digit', minute:'2-digit'})

table thead th
{
	height:30px;
	padding:5px 0 5px 0;
}
table thead tr th:nth-child(1)
{
	width:200px;
}
table thead tr th:nth-child(2)
{
	width:150px;
}
table thead tr th:nth-child(3)
{
	padding-left:10px;
	padding-right:10px;
}
table tbody tr
{
	border-bottom:1px solid #bbb;

}
table thead tr
{
	border-bottom:1px solid #bbb;
	background-color:#ddd;
}
.table_si_cell_stat-date
{
	text-align:center;
}
.table_si_cell_stat-date-link
{
	text-align:center;
}
.table_si_cell_stat-date-user
{
	text-align:center;
	padding-left:20px;
	padding-right:20px;	
}
table
{
	border-collapse:collapse;
	font-family:Arial;
	font-size:14px;
	cursor:default;
	margin-top:10px;
	background-color:#fff;
	border:1px solid #ddd;
}
table a
{
	text-decoration:none;
	color:#08c;
}
table a:hover
{
	color:#05c;
}

<table>
  <thead>
	<tr>
	  <th>Date</th>
	  <th>Link</th>
	  <th>Users</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td class="table_si_cell_stat-date"></td>
	  <td class="table_si_cell_stat-date-link">
		<a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
	<tr>
	  <td class="table_si_cell_stat-date"></td>
	  <td class="table_si_cell_stat-date-link">
	    <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
  </tbody>
</table>

Answer 1

如果您的意思是它没有找到该类的所有元素，那是因为那不是它的工作。 querySelector 查找第一个匹配元素。如果您想要一个列表，则需要 querySelectorAll。

var times = document.querySelectorAll(".table_si_cell_stat-date");

for (var t of times) {
  t.textContent = new Date().toLocaleDateString([], {
    year:'numeric',
    month: 'long',
    day:'numeric',
    hour:'2-digit',
    minute:'2-digit'
  });
}

<table>
  <thead>
	<tr>
	  <th>Date</th>
	  <th>Link</th>
	  <th>Users</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td class="table_si_cell_stat-date"></td>
	  <td class="table_si_cell_stat-date-link">
		<a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
	<tr>
	  <td class="table_si_cell_stat-date"></td>
	  <td class="table_si_cell_stat-date-link">
	    <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
  </tbody>
</table>

注意:for-of 循环是相当新的，是 ES2015(又名“ES6”)及更高版本的功能。如果您正在针对 ES2015 之前的环境进行编码，则可以使用简单的 for 循环或 this answer 中的任何“类似数组”建议来循环遍历列表。 .