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?

Titan
sumber

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.

Pranay Rana
sumber
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
26

Gunakan ini..

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

sushil bharwani
sumber
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.

Vignesh Raja
sumber