如何通過jquery在所有鏈接中添加功能？

Question

我正在使用以下函數來加載頁面。我有大量的鏈接，不能添加到所有鏈接。

function LoadPage(url) { 
    $("#canvas").load(url); 
} 

我想一個函數，將得到所有<a>標籤href值，這個功能添加到所有鏈接就像下面：

var oP = document.getElementsByTagName("a"), 
    ctr = 0 
; 

while(ctr < oP.length) { 
    var oldHref = document.getElementsByTagName("a")[ctr].href; 

    document.getElementsByTagName("a")[ctr].href = "javascript:loadPage('" + oldHref + "');"; 
    ctr++; 
} 

我要添加的所有鏈接，但不要「INDEX。 HTML」。

Answer 1

事情是這樣的：

// select all links 
$('a') 
    // check that the pathname component of href doesn't end with "/index.html" 
    .filter(function() { 
    return !this.href.pathname.match(/\/index\.html$/); 
    // // or you may want to filter out "/index.html" AND "/", e.g.: 
    // return !this.href.pathname.match(/\/(index\.html)?$/i) 
    }) 
    // add a click event handler that calls LoadPage and prevents following the link 
    .click(function(e) { 
    e.preventDefault(); 
    LoadPage(this.href); 
    }); 

既然你動態加載的頁面的部分，你需要建立事件委託來代替。具體做法取決於您使用的jQuery版本，但您將使用.on()（jQuery 1.7+）或.delegate()（jQuery 1.7之前）函數。該.on()例子是這個樣子：

$('body').on('click', 'a', function(e) { 
    if(!this.href.pathname.match(/\/index\.html$/)) { 
     e.preventDefault(); 
     LoadPage(this.href); 
    } 
}); 

Answer 2

在回答你的問題有關新加載的頁面，$.load() takes a second argument上轉換鏈接，你可以用它來應用功能如@ AnthonyGrist一個回調函數的新內容，例如：

function loadPage(url) { 
    // add a callback to $.load() to be executed for the next content 
    $("#canvas").load(url, function() { convertLinks(this); }); 
} 

function convertLinks(context) { 
    // select all links in the given context 
    $('a', context) 
    // check that the pathname component of href doesn't end with "/index.html" 
    .filter(function() { 
     return !this.href.pathname.match(/\/index\.html$/); 
     // // or you may want to filter out "/index.html" AND "/", e.g.: 
     // return !this.href.pathname.match(/\/(index\.html)?$/i) 
    }) 
    // add a click event handler that calls LoadPage and prevents following the link 
    .click(function(e) { 
     e.preventDefault(); 
     loadPage(this.href); 
    }) 
    ; 
} 

// call convertLinks on the whole document on initial page load 
$(function() { convertLinks(document); }); 

使用.on()也是一個合理的解決方案。對規則的Javascript代碼