使用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>