jQuery從三個相同的表中選擇第一個表中的所有行

我使用cheerio庫來抓取數據，該庫允許我在我的node.JS應用程序中使用jQuery選擇器。我從中抓取數據的網站包含三個表格，所有這些表格都具有相同的類名稱並且完全相同。這些表格內的表格行數（tr）可能會有所不同。jQuery從三個相同的表中選擇第一個表中的所有行

下方是一個表的一個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。當所有這些表基本相同（相同的類名）時，我將如何實現這一點？

下面是我到目前爲止所嘗試的，但它仍然輸出所有三個表格中的文本，而不是僅輸出第一個。

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

在此先感謝！作者：.first() jQuery函數

來源

2017-01-12 B_CooperA

是什麼'that'到底是什麼？ – Alex

哦，對不起。這是一個引用'$（this）'的變量。我已經在我的代碼中聲明瞭它，但是忘記了將它包含在這裏.. –

利用獲得的第一個表，然後使用$(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>

來源

2017-01-12 08:30:25

謝謝，期望的輸出正如我所希望的那樣。隊友的歡呼聲！ :) –

嘗試這樣的。

選擇第一個表

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

來源

2017-01-12 08:31:49 Deep

jQuery從三個相同的表中選擇第一個表中的所有行

回答

相關問題