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:eq(1) 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();

Answer 2

你可以这样做：

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 & Audio apps apks" href="/category/music-audio/1/"><span>Free</span><span> Music & 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>  <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 3

变化

$('.row table tr')

带

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

jquery .eq()

如何在jQuery上获得唯一的选择器

3 个答案: