jQuery выбрать все строки из первой таблицы из трех идентичных

Question

Я очищаю данные, используя библиотеку cheerio, которая позволяет мне использовать селекторы jQuery внутри моего приложения node.JS. Веб-сайт, на котором я извлекаю данные, содержит три таблицы, все эти таблицы имеют одинаковые имена классов и идентичны. Количество строк таблицы (tr) внутри этих таблиц может отличаться.

Underneath является 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. Как я могу достичь этого, когда все эти таблицы в основном идентичны (идентичные имена классов)?

Underneath - это то, что я пробовал до сих пор, но он по-прежнему выводит текст из всех трех таблиц, а не только из первых.

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

Заранее благодарен!

Answer 1

Воспользоваться .first() функции JQuery, чтобы получить первую таблицу, а затем использовать $(this) внутри функции .each вместо 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

Попробуйте, как это.

выберите первую таблицу

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