1

I'm trying to get unique selector on jQuery. There is two codes with same selector ? How can I choose the second part ??

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>

Improve this question
7
  • Why won't you use id's? Commented May 18, 2018 at 9:41
  • What id's ? could u give me a code, please ? Commented May 18, 2018 at 9:42
  • 1
    its an attribute which make that perticular element unique just like a page number in a textbook Commented May 18, 2018 at 9:44
  • like this .row table tr [1] ? Commented May 18, 2018 at 9:47
  • like #myUniqueTr and in the html <tr id="myUniqueTr"></tr> Commented May 18, 2018 at 9:50

3 Answers 3

Reset to default
1

You can do it either like this:

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();

Or like this:

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>

EDIT

Instead of this:

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

It is use eq() function

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Can i choose two selectors div, like ('.row').get(1).get(2)?
@НекТраммм I'm not sure about get() but you can do it wit eq() like $('.row').eq(1, 2). This what you suggested would not work because $('.row').get(1) returns only second element, so you can't get third element from second one :)
yes you're right eq(1, 2) works ) Thank you very much !
1

You can go with 

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();
Improve this answer

2 Comments

i'm trying this method but unfortunately it gives me SyntaxError: unmatched pseudo-class :eq in html code this site have 12 row div, so i choose 8 and it dont work ( HTML code link, maybe you could look at this html code, and help me ?
Don't know why it wouldn't work though, maybe something conflicting with Jquery in your code. Check js fiddle here (same jquery version as yours) : jsfiddle.net/btpcx021/1
1

change

$('.row table tr')

with 

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

jquery .eq()

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.