javascript - 如何在 jQuery 上获取唯一选择器

Question

我正在尝试在 jQuery 上获取唯一选择器。有两个代码具有相同的选择器？我该如何选择第二部分？？

const data = $('.row table tr').map(function() {
  const a = $(this).find('td:first-child a');
  const td = $(this).find('td:last-child');

  return {
    version: a.text(),
    href: a.attr('href'),
    date: td.text()
  }
}).get();
console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="margin-left: 2%; margin-right: 2%;">
  <table class="striped" style="margin-left: auto; margin-right: auto;">
    <tbody>
      <tr><td>App Download Version</td><td><span>1.12</span></td></tr>
      <tr><td>Last Updated</td><td><span>April 8, 2018</span></td></tr>
      <tr><td>Apk Size</td><td><span>3.0M</span></td></tr>
      <tr><td>App by</td><td><span>Free Music - 🎵🎵</span></td></tr>
      <tr><td>Category</td><td><a title="Download Music &amp; Audio apps apks" href="/category/music-audio/1/"><span>Free</span><span> Music &amp; Audio</span> App</a></td></tr>
      <tr><td>Content Rating</td><td>Teen</td></tr>
      <tr><td>Support Android Version</td><td><span>Android 15 and above</span></td></tr>
      <tr><td>App Package</td><td class="hide-on-small-only">com.musicstreaming.freemusic</td><td class="hide-on-med-and-up">com.musicstr...</td></tr>
    </tbody>
  </table>

  <!-- Second Part -->

  <div class="row" style="margin-left: 2%; margin-right: 2%;">
    <table class="striped" style="margin-left: auto; margin-right: auto;">
      <tbody>
        <tr>
          <td><a title="download Free Music 1.12 apk " onclick="ga('send', 'event', 'button', 'download_ver', 'com.musicstreaming.freemusic_2018-04-08.apk');" href="/download-app/com.musicstreaming.freemusic/4_com.musicstreaming.freemusic_2018-04-08.apk/">1.12</a></td>
          <td>April 8, 2018</td>
        </tr>
      </tbody>
    </table>

Answer 1

你可以这样做:

const data = $($('.row').get(1)).find('table tr').map(function() {
  const a = $(this).find('td:first-child a');
  const td = $(this).find('td:last-child');

  return {
    version: a.text(),
    href: a.attr('href'),
    date: td.text()
  }
}).get();

或者像这样:

const data = $(document.getElementsByClassName('row')[1]).find('table tr').map(function() {
  const a = $(this).find('td:first-child a');
  const td = $(this).find('td:last-child');

  return {
    version: a.text(),
    href: a.attr('href'),
    date: td.text()
  }
}).get();

const data = $($('.row').get(1)).find('table tr').map(function() {
  const a = $(this).find('td:first-child a');
  const td = $(this).find('td:last-child');

  return {
    version: a.text(),
    href: a.attr('href'),
    date: td.text()
  }
}).get();
console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="margin-left: 2%; margin-right: 2%;">
  <table class="striped" style="margin-left: auto; margin-right: auto;">
    <tbody>
      <tr>
        <td>App Download Version</td>
        <td><span>1.12</span></td>
      </tr>
      <tr>
        <td>Last Updated</td>
        <td><span>April 8, 2018</span></td>
      </tr>
      <tr>
        <td>Apk Size</td>
        <td><span>3.0M</span></td>
      </tr>
      <tr>
        <td>App by</td>
        <td><span>Free Music - 🎵🎵</span></td>
      </tr>
      <tr>
        <td>Category</td>
        <td><a title="Download Music &amp; Audio apps apks" href="/category/music-audio/1/"><span>Free</span><span> Music &amp; Audio</span> App</a></td>
      </tr>
      <tr>
        <td>Content Rating</td>
        <td>Teen</td>
      </tr>
      <tr>
        <td>Support Android Version</td>
        <td><span>Android 15 and above</span></td>
      </tr>
      <tr>
        <td>App Package</td>
        <td class="hide-on-small-only">com.musicstreaming.freemusic</td>
        <td class="hide-on-med-and-up">com.musicstr...</td>
      </tr>
    </tbody>
  </table>

  <!-- Second Part -->

  <div class="row" style="margin-left: 2%; margin-right: 2%;">
    <table class="striped" style="margin-left: auto; margin-right: auto;">
      <tbody>
        <tr>
          <td><a title="download Free Music 1.12 apk " onclick="ga('send', 'event', 'button', 'download_ver', 'com.musicstreaming.freemusic_2018-04-08.apk');" href="/download-app/com.musicstreaming.freemusic/4_com.musicstreaming.freemusic_2018-04-08.apk/">1.12</a></td>
          <td>April 8, 2018</td>
        </tr>
      </tbody>
    </table>

编辑

取而代之的是:

$($('.row').get(1)).find('table tr')...

使用eq()函数

$('.row').eq(1).find('table tr')...

const data = $('.row').eq(1).find('table tr').map(function() {
  const a = $(this).find('td:first-child a');
  const td = $(this).find('td:last-child');

  return {
    version: a.text(),
    href: a.attr('href'),
    date: td.text()
  }
}).get();
console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="margin-left: 2%; margin-right: 2%;">
  <table class="striped" style="margin-left: auto; margin-right: auto;">
    <tbody>
      <tr>
        <td>App Download Version</td>
        <td><span>1.12</span></td>
      </tr>
      <tr>
        <td>Last Updated</td>
        <td><span>April 8, 2018</span></td>
      </tr>
      <tr>
        <td>Apk Size</td>
        <td><span>3.0M</span></td>
      </tr>
      <tr>
        <td>App by</td>
        <td><span>Free Music - 🎵🎵</span></td>
      </tr>
      <tr>
        <td>Category</td>
        <td><a title="Download Music &amp; Audio apps apks" href="/category/music-audio/1/"><span>Free</span><span> Music &amp; Audio</span> App</a></td>
      </tr>
      <tr>
        <td>Content Rating</td>
        <td>Teen</td>
      </tr>
      <tr>
        <td>Support Android Version</td>
        <td><span>Android 15 and above</span></td>
      </tr>
      <tr>
        <td>App Package</td>
        <td class="hide-on-small-only">com.musicstreaming.freemusic</td>
        <td class="hide-on-med-and-up">com.musicstr...</td>
      </tr>
    </tbody>
  </table>

  <!-- Second Part -->

  <div class="row" style="margin-left: 2%; margin-right: 2%;">
    <table class="striped" style="margin-left: auto; margin-right: auto;">
      <tbody>
        <tr>
          <td><a title="download Free Music 1.12 apk " onclick="ga('send', 'event', 'button', 'download_ver', 'com.musicstreaming.freemusic_2018-04-08.apk');" href="/download-app/com.musicstreaming.freemusic/4_com.musicstreaming.freemusic_2018-04-08.apk/">1.12</a></td>
          <td>April 8, 2018</td>
        </tr>
      </tbody>
    </table>