jQueryは、同一の3つのうち最初のテーブルからすべての行を選択します。

Question

私はnode.JSアプリケーション内でjQueryセレクタを使用できるように、cheerioライブラリを使用してデータを削っています。 私はデータを削っているウェブサイトに3つのテーブルがあり、これらのテーブルはすべて同じクラス名を持ち、同一です。 これらのテーブル内のテーブル行数（tr）は異なる場合があります。

の下側には、テーブルのいずれかのHTMLスケルトンです：私がやりたいのは何

<table class="component"> 
    <tr class="body-row"> 
     <td class="column"> 
      <span class="display-inline-block"> 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
      </span> 
     </td>  

     <td class="column"> 
      <span class="display-inline-block"> 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
      </span> 
     </td> 
    </tr> 
    <tr class="body-row"> 
     <td class="column"> 
      <span class="display-inline-block"> 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
      </span> 
     </td>  

     <td class="column"> 
      <span class="display-inline-block"> 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
      </span> 
     </td> 
    </tr> 
</table> 

はJSONとして最初のテーブルからすべての行のみ、最終的に出力それらのテキストを選択しています。これらのテーブルがすべて基本的に同じ（同じクラス名）の場合、どのようにしてこれを達成できますか？

私はこれまでに試したことがありますが、まだ最初のものではなく3つのテーブルすべてからテキストを出力します。

var that = $(this); 
that.first('table.component').find("tr.body-row").each(function(){ 
    console.log(that.find('span.data').text()); 
}); 

ありがとうございます！

Answer 1

.first() jqueryの関数の

MAKE使用は最初のテーブルを取得して、代わりにthat

$(function(){ 
 
    $(".component").first().find('.body-row').each(function(){ 
 
    console.log($(this).find('span.data').text()); 
 
}); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

の.each関数内$(this)を使用するには、このようにしてください。

は `that`が正確に何ですか？

$('table.component').first() 

$('table.component').first().find("tr.body-row td span span.data").each(function(index,elem){ 
 
    console.log(elem.textContent); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 1</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 2</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 3</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 4</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<table class="component"> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 7</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 8</span> <!-- I'd like to be able to scrape these values --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="body-row"> 
 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 9</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td>  
 

 
     <td class="column"> 
 
      <span class="display-inline-block"> 
 
       <span class="data">Text 10</span> <!-- I'd like to be able to output these values as JSON --> 
 
      </span> 
 
     </td> 
 
    </tr> 
 
</table>