javascript - 对于类中的每个元素，console.log 其值

Question

对于类为 the_name 的每个元素，我想提醒该元素内的值。所以对于下面的代码，它应该 alert 三次。每个一次:“苹果”、“梨”和“李子”。

不确定我在这里遗漏了什么。

var arr = $('.the_name');
for(var i = 0; i < arr.length; i++){
  alert(arr[i].val());  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="datatable">
	<thead>
		<tr>
			<th></th>
			<th>Fruits</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="the_name">Apples</td>
			<td class="the_count">3</td>
		</tr>
		<tr>
			<td class="the_name">Pears</td>
			<td class="the_count">2</td>
		</tr>
		<tr>
			<td class="the_name">Plums</td>
			<td class="the_count">5</td>
		</tr>
		<tr>
			<td>Bananas</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Oranges</td>
			<td>2</td>
		</tr>
	</tbody>
</table>

Answer 1

通过索引访问 jQuery 对象，您将检索底层的 DOMElement，而不是 jQuery 对象，并且它们没有 val() 方法。另请注意，您似乎正在寻找检索元素的文本，而不是值。因此，您应该使用 each() 循环选择的元素，使用 this 来引用当前迭代的元素。试试这个:

$('.the_name').each(function() {
    alert($(this).text());  
});

另请注意，出于调试目的，应使用 console.log() 而不是 alert()。

$('.the_name').each(function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="datatable">
  <thead>
    <tr>
      <th></th>
      <th>Fruits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="the_name">Apples</td>
      <td class="the_count">3</td>
    </tr>
    <tr>
      <td class="the_name">Pears</td>
      <td class="the_count">2</td>
    </tr>
    <tr>
      <td class="the_name">Plums</td>
      <td class="the_count">5</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>2</td>
    </tr>
  </tbody>
</table>