get complete list of href attribute from website

Question

I want to get the complete list of all the URLs generated for the YouTube playlist from website whose link structure looks like:

<table class="table" id="ListVideo">
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><img style="height: 55px;width: 90px;" src="http://img.youtube.com/vi/mHpvT1P_OAM/default.jpg"></td>
            <td>Android Development for Beginner: Brief Overview Of Android</td>
            <td>
                <div id="Download-mHpvT1P_OAM" link="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"><a download="" href="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"
                    class="btn btn-default" type="button">MP4 720P</a> </div>
            </td>
        </tr>
        .
        . and so on 
        .
        .
    </tbody>
</table>

I am able to get the individual hrefs from a tag using

console.log($("#ListVideo td div a").attr("href"))

which gives me link https://redirector.googlevideo.com/videoplayback...0Brief%20Overview%20Of%20Android I want but when I try to loop through all the links with below function

$("#ListVideo td div a").each(()=> {console.log($(this).attr("href"))})

instead I get undefined. Here is the JSfiddle link with the complete page source from which I want to get links. Can someone please tell me where am I going wrong. Thanks

the solution present there is the same I have tried which is not working — warl0ck, Apr 18 '17 at 12:59
probably because you are trying to get a href attrbiute off a div (which won't have one) — Pete, Apr 18 '17 at 13:00
sorry forgot to add a tag in here, though I used that to fetch all links, updated my question — warl0ck, Apr 18 '17 at 13:02
in which case you probably can't do an anonymous function like that in the each — Pete, Apr 18 '17 at 13:03

score 2 · Accepted Answer · edited May 23 '17 at 11:47

2

use the right methods to get the right $(this) - so not an arrow function in this case.

var list = [];
$("#ListVideo td div a").each(function() {
  list.push($(this).attr("href"))
});
console.log(list);

Using arrow, you need to not use this as seen in

Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)

var list1 = [];
$("#ListVideo td div a").each((index, element) => {
  list1.push($(element).attr("href"));
});
console.log(list1);

https://jsfiddle.net/mplungjan/yr39tmqn/

edited May 23 '17 at 11:47

Community

1
1

answered Apr 18 '17 at 13:00

mplungjan

169,008
28
173
236

Thanks for the info on $(this) and es6 arrow function – warl0ck Apr 18 '17 at 16:08

score 2 · Answer 2 · answered Apr 18 '17 at 13:01

First of all, what about selecting the elements based on their attribute, like this $([href])?

Secondly, ()=> {console.log($(this).attr("href"))} logs undefined as arrow funcitons have a different this. To put it short, an arrow function does not create its own this context, so this has its original meaning from the enclosing context. You can read more about it here. Using a classic function would work for you.

score 1 · Answer 3 · answered Apr 18 '17 at 13:07

1

Here is your updated fiddle.You can see the number of links exactly logged out to the console.

console.log($("#ListVideo td div a").attr("href"));
var hrefArray = [];
$("#ListVideo td div a").each(function(){
    console.log($(this).attr("href"));
  hrefArray.push($(this).attr("href"));
});

console.log(hrefArray.length);

answered Apr 18 '17 at 13:07

Muhammad Bashir

97
8

no difference. couldn't see your answer before posting mine. – Muhammad Bashir Apr 19 '17 at 05:30

loelsonk · Answer 4 · 2017-04-18T13:24:33.703

Here is working example, pure javascript code. We use querySelectorAll to find all anchors within our .table class.

var anchors = document.querySelectorAll('.table a');


// pure js
for (i = 0; i < anchors.length; i++) {
  var anchor = anchors[i];
  
  // You can access href attribute via anchor.href
  console.log(anchor.href);
}

// using forEach, we must use Object.keys 
Object.keys(anchors).forEach(function(key) {
    // console.log(anchors[key].href);  // href
});


// using map, we must use Object.keys 
var listOfAnchors = Object.keys(anchors).map(function(key) {
  return anchors[key].href;
});

// Array of anchors inside our table
// console.log(listOfAnchors);

<table class="table" id="ListVideo">
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><img style="height: 55px;width: 90px;" src="http://img.youtube.com/vi/mHpvT1P_OAM/default.jpg"></td>
            <td>Android Development for Beginner: Brief Overview Of Android</td>
            <td>
                <div id="Download-mHpvT1P_OAM" link="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"><a download="" href="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"
                    class="btn btn-default" type="button">MP4 720P</a> </div>
            </td>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td><img style="height: 55px;width: 90px;" src="http://img.youtube.com/vi/mHpvT1P_OAM/default.jpg"></td>
            <td>Android Development for Beginner: Brief Overview Of Android</td>
            <td>
                <div id="Download-mHpvT1P_OAM" link="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"><a download="" href="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"
                    class="btn btn-default" type="button">MP4 720P</a> </div>
            </td>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td><img style="height: 55px;width: 90px;" src="http://img.youtube.com/vi/mHpvT1P_OAM/default.jpg"></td>
            <td>Android Development for Beginner: Brief Overview Of Android</td>
            <td>
                <div id="Download-mHpvT1P_OAM" link="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"><a download="" href="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"
                    class="btn btn-default" type="button">MP4 720P</a> </div>
            </td>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td><img style="height: 55px;width: 90px;" src="http://img.youtube.com/vi/mHpvT1P_OAM/default.jpg"></td>
            <td>Android Development for Beginner: Brief Overview Of Android</td>
            <td>
                <div id="Download-mHpvT1P_OAM" link="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"><a download="" href="https://redirector.googlevideo.com/videoplayback?api=youtubemultidownloader.com&amp;mn=sn-p5qlsnz6&amp;signature=B2C601E05D43FADDDDDC595B25F3A77E4CF24FB9.96E1AB91173820178049E0402A3F48E29086AEBB&amp;mime=video%2Fmp4&amp;mt=1492516586&amp;dur=182.415&amp;id=o-AIjyKLM2gc2g7w9RB0izMEVqvaTbIxAJ9iTa0tQakpAb&amp;key=yt6&amp;ip=66.249.83.29&amp;mm=31&amp;mv=m&amp;pl=28&amp;ipbits=0&amp;ms=au&amp;sparams=dur%2Cei%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&amp;expire=1492538256&amp;lmt=1486569580323751&amp;ratebypass=yes&amp;source=youtube&amp;upn=P2VOmq_LKgk&amp;itag=22&amp;requiressl=yes&amp;ei=MP_1WLKeBuKF8gTh35WgDQ&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android&amp;title=01.Android%20Development%20for%20Beginner%3A%20Brief%20Overview%20Of%20Android"
                    class="btn btn-default" type="button">MP4 720P</a> </div>
            </td>
        </tr>
    </tbody>
</table>

Why bother rewriting the script? It works when using the correct `this` — mplungjan, Apr 18 '17 at 14:08

get complete list of href attribute from website

4 Answers4