jQuery mengecualikan elemen dengan kelas tertentu di pemilih


127

Saya ingin menyiapkan pemicu acara klik di jQuery untuk tag anchor tertentu.

Saya ingin membuka tautan tertentu di tab baru sambil mengabaikan yang dengan kelas tertentu (sebelum Anda bertanya, saya tidak bisa meletakkan kelas pada tautan yang saya coba tangkap karena berasal dari CMS).

Saya ingin mengecualikan tautan dengan kelas "button"ATAU"generic_link"

Saya telah mencoba:

$(".content_box a[class!=button]").click(function (e) {
    e.preventDefault();     
    window.open($(this).attr('href'));
});

Tapi itu sepertinya tidak berhasil, juga bagaimana saya melakukan pernyataan ATAU untuk dimasukkan "generic_link"dalam pengecualian?

Jawaban:


263

Anda dapat menggunakan metode .not () :

$(".content_box a").not(".button")

Atau, Anda juga dapat menggunakan pemilih: not () :

$(".content_box a:not('.button')")

Ada sedikit perbedaan antara kedua pendekatan, kecuali .not()lebih mudah dibaca (terutama ketika dirantai) dan :not()sedikit lebih cepat. Lihat jawaban Stack Overflow ini untuk info lebih lanjut tentang perbedaannya.


1
Jadi saya bisa melakukan: $ (". Content_box a"). Not (". Button"). Not (". Generic_link"). Klik (fungsi (e) ...?
Titan

1
Bekerja dengan sempurna, bahkan saat menggunakan .each().
cfx

Tampaknya ada bug saat menggunakan .text()- teks dari elemen yang dihapus menggunakan say .notmasih dalam teks.
Netsi1964


2

Untuk menambahkan beberapa info yang membantu saya hari ini, objek jQuery / thisjuga dapat diteruskan ke pemilih .not () .

$(document).ready(function(){
    $(".navitem").click(function(){
        $(".navitem").removeClass("active");
        $(".navitem").not($(this)).addClass("active");
    });
});
.navitem
{
    width: 100px;
    background: red;
    color: white;
    display: inline-block;
    position: relative;
    text-align: center;
}
.navitem.active
{
    background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navitem">Home</div>
<div class="navitem">About</div>
<div class="navitem">Pricing</div>

Contoh di atas dapat disederhanakan, tetapi ingin menunjukkan penggunaan thisdalam not()pemilih.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.