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

Question

I am trying to print the first ten entries of a website which has a list, and I want the result in the console itself. Here's the structure of the HTML it's using

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

here's what i tried running in the console:

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

I am at a loss of what to do next. I'm fairly new to javascript so any help would be greatly appreciated.

Answer 1

You can use the innerText property to get the text.

Also, use list.length based comparison for running the for loop instead of arbitrary numbers such as 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> 

Keep in mind that unlike textConten , innerText will not display any text that is not visible on screen, or text inside <script> tags. See this for more info on the differences.

Answer 2

Use textContent or innerText to get the text you want. list[i].textContent

You can also use .innerHTML this will also show you tags.

Demo

 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

First thing is you need to use textContent to get the text content inside the selected element node.

Also to make it simpler to target nested elements in JavaScript, you can use these functions:

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

with jQuery, it's simple:

$('.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>