使用jQuery在嵌套的HTML标签中获取文本

Question

我正在尝试打印具有列表的网站的前十个条目，并且我希望结果显示在控制台本身中。 这是它使用的HTML的结构

<div class=classname>
  <b>The text i want</b>
</div>

这是我尝试在控制台中运行的内容：

list = document.getElementsByClassName('classname')
for(var i=0;i<10;i++)
{
  console.log (list[i])
}

我不知道下一步该怎么做。 我对javascript还是很陌生，所以将不胜感激。

Answer 1

您可以使用innerText属性获取文本。

另外，使用基于list.length的比较来运行for循环，而不要使用诸如10 ： for(var i=0;i<10;i++)类的任意数字。

 list = document.getElementsByClassName('classname') for(var i=0;i < list.length;i++) { console.log(list[i].innerText); } 

 <div class="classname"> <b>The text i want</b> </div> 

请记住，与textConten不同， innerText不会显示屏幕上不可见的任何文本，也不会显示<script>标记内的文本。 有关差异的更多信息， 请参见此内容。

Answer 2

使用textContent或innerText获取所需的文本。 list[i].textContent

您也可以使用.innerHTML这也会向您显示标签。

演示版

 list = document.getElementsByClassName('classname') for(var i=0;i<list.length;i++) { console.log (list[i].textContent) } 

 <div class=classname> <b>The text i want</b> </div> 

Answer 3

首先，您需要使用textContent来获取所选元素节点内的文本内容。

另外，为了更轻松地在JavaScript中定位嵌套元素，您可以使用以下函数：

querySelectorAll

querySelector

 var myTags = document.querySelectorAll(".classname b"); for( var i = 0; i < myTags.length; i++ ){ var curTag = myTags[i]; console.log( curTag.textContent ); } 

 <div class=classname> <b>The text i want</b> </div> <div class=classname> <b>The text i want (2nd time)</b> </div> <div class=classname> <b>The text i want (3rd time)</b> </div> 

Answer 4

使用jQuery，很简单：

$('.classname').each(function(i,e) {
    if (i==10) return false;
    console.log($(e).text());
});

 $('.classname').each(function(i,e) { if (i==10) return false; console.log($(e).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=classname> <b>The text i want 1</b> </div> <div class=classname> <b>The text i want 2</b> </div> <div class=classname> <b>The text i want 3</b> </div> <div class=classname> <b>The text i want 4</b> </div> <div class=classname> <b>The text i want 5</b> </div> <div class=classname> <b>The text i want 6</b> </div> <div class=classname> <b>The text i want 7</b> </div> <div class=classname> <b>The text i want 8</b> </div> <div class=classname> <b>The text i want 9</b> </div> <div class=classname> <b>The text i want 10</b> </div> <div class=classname> <b>The text i want 11</b> </div> <div class=classname> <b>The text i want 12</b> </div>