2017-04-18 109 views
0

href屬性的完整列表,我想要得到的所有URLs從網站YouTube的播放列表,其鏈接結構看起來生成的完整列表:得到網站

<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> 

我能夠拿到個人的HREFs使用

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

這給了我鏈接 https://redirector.googlevideo.com/videoplayback...0Brief%20Overview%20Of%20Android我想 但a tag當我試圖遍歷所有的鏈接下面的功能

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

而是我得到未定義。 這是JSfiddle鏈接與我想從中獲取鏈接的完整頁面源。 有人可以告訴我我哪裏錯了。謝謝

+0

解決方案目前還我已經試過這是不工作 – warl0ck

+1

可能是因爲你正在試圖獲得A HREF attrbiute關閉一個div(不會有) – Pete

+0

對不起相同忘記在這裏添加標籤,雖然我用它來獲取所有鏈接,但更新了我的問題 – warl0ck

回答

2

使用正確的方法得到正確的$(this) - 所以在這種情況下不是一個箭頭函數。

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

使用箭頭,你需要不使用this作爲

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/

+0

中執行類似這樣的匿名函數感謝有關$(this)和es6的信息箭頭功能 – warl0ck

2

首先看到的關於基於它們的屬性選擇元素,像這樣$([href])

其次,()=> {console.log($(this).attr("href"))}日誌未定義,因爲箭頭功能有不同的this。簡而言之,箭頭函數不會創建它自己的this上下文,所以this具有其封閉上下文中的原始含義。 你可以閱讀更多關於它here。使用經典的function會適合你。

1

這是您的updated fiddle。您可以看到剛剛註銷到控制檯的鏈接數量。

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); 
+0

沒有區別。發佈我的郵件之前無法看到您的答案。 –

0

這裏是工作的例子,純JavaScript代碼。我們使用querySelectorAll找到我們的.table課程中的所有a nchors。

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>

+0

爲什麼要重寫腳本?它在使用正確的'this'時起作用 – mplungjan