javascript - querySelector() not working in all classes

My first column should be actual date, but my js script works only for one class from my html code.

Question: How make that my js code works for every class in html code, I use querySelector(), but thing I should use something like $(this) but I can't know how.

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=".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=".asp">Check link</a>
	  </td>
	  <td class="table_si_cell_stat-date-user">
	    <a href="#">John B.</a>
	  </td>
	</tr>
  </tbody>
</table>

My first column should be actual date, but my js script works only for one class from my html code.

Question: How make that my js code works for every class in html code, I use querySelector(), but thing I should use something like $(this) but I can't know how.

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./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./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>

Share Improve this question edited Feb 12, 2017 at 16:09 Felix Kling 818k181 gold badges1.1k silver badges1.2k bronze badges asked Feb 12, 2017 at 16:04 Mat.Now 1,7353 gold badges19 silver badges31 bronze badges

4 you should use querySelectorAll instead :) – uladzimir Commented Feb 12, 2017 at 16:05
1 From MDN: "Returns the first Element within the document (...) that matches the specified group of selectors." developer.mozilla/en-US/docs/Web/API/Document/querySelector – Felix Kling Commented Feb 12, 2017 at 16:07

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

If you mean it's not finding all elements with that class, that's because that's not its job. querySelector finds the first matching element. If you want a list, you want querySelectorAll instead.

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./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./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>

Note: for-of loops are quite new, a feature of ES2015 (aka "ES6") and above. If you're coding to a pre-ES2015 environment, you can loop through the list with a simple for loop or any of the "array-like" suggestions in this answer.

You need to use document.querySelectorAll(), it returns a list of element which you can iterate and set inner HTML.

var times = document.querySelectorAll(".table_si_cell_stat-date");
var text = .....
times.forEach((x) => x.innerHTML = text);

var times = document.querySelectorAll(".table_si_cell_stat-date");
var text = new Date().toLocaleDateString([], {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});

times.forEach((x) => x.innerHTML = text);

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./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./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>

The querySelector method only selects a single element, to get the collection of element use querySelectorAll method and iterate over them to update content.

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

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

// for older browser use [].slice.call(time)    
Array.from(time).forEach(function(ele) {
  ele.innerHTML = date;
})

var date = new Date().toLocaleDateString([], {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});
var time = document.querySelectorAll(".table_si_cell_stat-date");

Array.from(time).forEach(function(ele) {
  ele.innerHTML = date;
})

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./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./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - querySelector() not working in all classes - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)