jQuery - 無法過濾div的鏈接

Question

我想選擇所有內部鏈接，這些鏈接位於我的文檔中，但不包括位於特殊div中的鏈接。

以下所示爲我的網站佈局的例子：

<div id="toppanel"> 
    <a href="test.php">Test</a> 
</div> 
<div id="page"> 
    <div id="content"></div> 
    <div id="menu"> 
     <a href="menu1.php">Menu1<a> 
     <a href="menu2.php">Menu2<a> 
    </div> 
</div> 
<div id="footer"> 
    <ul> 
     <li><a href="index.php">Startseite</a></li> 
     <li class="sep">|</li> 
     <li>Datenschutz</li> 
     <li class="sep">|</li> 
     <li>Impressum</li> 
    </ul> 
</div> 

我的jQuery代碼如下：

$("a[target!='_blank']").not('#toppanel').live("click", function(event) { 
    event.preventDefault(); 

    var href = $(this).attr('href'); 
    $.get(href, function(data) { 
     $('#content').html(data); 
    }); 
}); 

的問題是，這種沒有任何鏈接的正常工作。如果我使用沒有使用not（）語句的jQuery代碼，所有工作正常的鏈接，但也是＃toppanel-div中的一個，我想阻止它，因爲這些鏈接以另一種方式使用。

Answer 1

嘗試查看點擊的父元素，看它是否是#toppanel孩子：

$("a[target!='_blank']").live("click", function(event) { 
    if (!$(this).closest("#toppanel").length) { 
     event.preventDefault(); 

     var href = $(this).attr('href'); 
     $.get(href, function(data) { 
      $('#content').html(data); 
     }); 
    } 
}); 

Example fiddle

Answer 2

可能與此有關：

不支持鏈接方法。例如，$（「a」）。find（「。offsite，.external」）。live（...）;無效並且不按預期工作。

從這裏：

http://api.jquery.com/live/

它可能是值得使用的新事件連接方法之一。

Answer 3

你的意思是：

$("a").live("click", function(event) { 
    event.preventDefault(); 
    if($(this).parent("div").attr("id") != "toppanel") { 
     var href = $(this).attr('href'); 
     $.get(href, function(data) { 
     $('#content').html(data); 
     }); 
    } 
}); 

Answer 4

下面就來構建你要找的選擇的一種方式 - working jsfiddle here：

$my_elements = $("a[target!='_blank']") 
    .not(function(){ return !$(this).closest('#toppanel').length }); 

你的整個片段是這樣的：

$("a[target!='_blank']") 
.not(function(){ return !$(this).closest('#toppanel').length }) 
.live("click", function(event) { 
    event.preventDefault(); 

    var href = $(this).attr('href'); 
    $.get(href, function(data) { 
     $('#content').html(data); 
    }); 
}); 

另外，由於Evert mentio ned，live()不支持鏈接正確。您應該使用on()或者，如果您使用的是jQuery < 1。7，delegate()附上您的活動：

$("a[target!='_blank']") 
.not(function(){ return !$(this).closest('#toppanel').length }) 
.on("click", function(event) { 
    event.preventDefault(); 

    var href = $(this).attr('href'); 
    $.get(href, function(data) { 
     $('#content').html(data); 
    }); 
}); 

---

另一種解決方案，甚至是一個更優雅的一個，將過濾<div>！而非將<a> S的：

$('a[target!="_blank"]', 'div:not("#toppanel")').on('click', function(event){ /* ... */ }); 

同，利用selector自變量on()：

$('div').not('#toppanel').on('click', 'a[target!="_blank"]', function(event){ /* ... */ }); 

---

編輯：取代closest()parentsUntil()由於性能方面的原因 - 看到jsperf test comparison