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

Question

对于具有the_name类的每个元素，我想提醒该元素内的值。 因此，对于下面的代码，它应该发出三次警报。 每个一次用于：“苹果”，“豌豆”和“李子”。

不知道我在这里想念的是什么。

 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> 

Answer 2

1. 您需要使用.text()而不是.val() 。
   .val()作用于输入元件（或带有值属性的任何元素α）和.text()将不会在输入元件工作。 .val()获取输入元素的值-与类型无关。 .text()获取所有匹配元素的innerText（不是HTML）：

.text()

结果是一个字符串，其中包含所有匹配元素的组合文本内容。 此方法对HTML和XML文档均适用。 不能在输入元素上使用。 对于输入字段文本，请使用val属性。

.val()

获取第一个匹配元素的value属性的内容

2. 您需要使用use $来使用jquery方法.text() 。

 var arr = $('.the_name'); for(var i = 0; i < arr.length; i++){ alert($(arr[i]).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> 

Answer 3

jQuery对象的索引值是HTML元素，而不是jQuery对象。

您必须先将它们包装在jQuery对象中，然后才能对它们调用jQuery方法：

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