如何用Wikipedia API结合JavaScript/jQuery获取维基百科表格元素？

Absolutely! Since NFL Draft pages on Wikipedia follow a consistent structure, grabbing specific cells or filtering players by school is totally doable with the Wikipedia API and jQuery. Here's a step-by-step breakdown for your use case:

1. Fetch Page Content via Wikipedia API #

First, we'll use the MediaWiki Parse API to pull the page's HTML content. The origin: '*' parameter is critical here—it lets us avoid cross-origin errors when working client-side.

2. Target a Specific Cell (e.g., Round 1, Pick 7) #

Once we have the page content, we can use jQuery to traverse the draft table and extract the exact cell you need. Here's the working code:

$.ajax({
  url: 'https://en.wikipedia.org/w/api.php',
  data: {
    action: 'parse',
    page: '2017_NFL_Draft',
    format: 'json',
    prop: 'text',
    origin: '*' // Required for CORS support
  },
  dataType: 'json',
  success: function(data) {
    // Convert returned HTML into a jQuery object for easy traversal
    const $pageContent = $(data.parse.text['*']);
    // Target the main draft table (consistently uses .wikitable.sortable class)
    const $draftTable = $pageContent.find('.wikitable.sortable').first();

    // Locate the Round 1 section of the table
    const $round1Section = $draftTable.find('thead').filter(function() {
      return $(this).text().includes('Round 1');
    }).next();
    // Pick 7 is the 7th row (index 6, since we start counting at 0)
    const $pick7Row = $round1Section.find('tr').eq(6);
    // Extract the player name (3rd cell in the row, index 2)
    const pick7Player = $pick7Row.find('td').eq(2).text().trim();
    
    console.log('Round 1, Pick 7:', pick7Player);
  },
  error: function(err) {
    console.error('Failed to fetch data:', err);
  }
});

3. Filter Players by School (e.g., All UCLA Players) #

To grab every player selected from UCLA, we'll loop through all draft rows and check the school column. Here's how to do it:

$.ajax({
  url: 'https://en.wikipedia.org/w/api.php',
  data: {
    action: 'parse',
    page: '2017_NFL_Draft',
    format: 'json',
    prop: 'text',
    origin: '*'
  },
  dataType: 'json',
  success: function(data) {
    const $pageContent = $(data.parse.text['*']);
    const $draftTable = $pageContent.find('.wikitable.sortable').first();
    const uclaPlayers = [];

    // Loop through all draft rows (skip header rows)
    $draftTable.find('tbody tr').each(function() {
      const $row = $(this);
      // School is the 5th cell (index 4) in each row
      const school = $row.find('td').eq(4).text().trim();
      
      if (school === 'UCLA') {
        uclaPlayers.push({
          pickNumber: $row.find('td').eq(0).text().trim(),
          playerName: $row.find('td').eq(2).text().trim(),
          position: $row.find('td').eq(3).text().trim(),
          team: $row.find('td').eq(1).text().trim()
        });
      }
    });

    console.log('All UCLA Players Selected in 2017 NFL Draft:', uclaPlayers);
  },
  error: function(err) {
    console.error('Failed to fetch data:', err);
  }
});

Key Notes #

• Structure Reliance: This works because NFL Draft pages use a standardized table layout. If Wikipedia ever updates this structure, you'll need to adjust cell indexes or selectors.
• Data Cleaning: Always use trim() to remove extra whitespace or newlines from extracted text.
• Alternative Approach: For more structured data, you could explore Wikidata (Wikipedia's linked data repository), but parsing the table HTML is simpler for this specific use case.

内容的提问来源于stack exchange，提问作者DietDrB