如何通过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代码