jQuery ile toplu Class Ekleme ve Silme

  2016/07/06 02:54 • Ana Sayfa > JavaScript

Javascript nimetlerinden jQuery,in 1.2/2.2 versiyonlarıyla kullanıma geçen addClass ve removeClass fonksiyonları, HTML sayfasında kullanılan belli bir elemente, sınıf ismi verebilmenizi sağlar. 

Prism ve highlighter.js gibi eklentiler ile daha da popüler olan addClass ve removeClass fonksiyonlarının genel kullanım detaylarını ve çalışma mantığını aşağıda inceleyebilirsiniz.

addClass Örnek Kullanım

<pre><code> ... </code></pre>

Yukarıdaki kod, Prism.js eklentisini yazdırmak için kullanılır. Code elementine class="language-css" sınıfı dahil edildiğinde, kodların CSS olduğu anlaşılır ve CSS editör renkleriyle listelenir.

Bunu toplu olarak yapmak için ise aşağıdaki jQuery kodunu kullanabilirsiniz.

$(document).ready(function() {
  $("pre code").addClass("language-css");
});

Bu kod ile, pre>code elementlerinin tümüne, arkaplanda çalışacak şekilde language-css sınıfını dahil ettik.

removeClass Örnek Kullanım

$(document).ready(function() {
  $("pre code").removeClass("language-css");
});

Bu kod ile ise, sayfadaki tüm pre>code elementlerindeki language-css sınıfını kaldırmayı tercih etmiş olduk. removeClass'dan sonra tekrar addClass fonksiyonunu kullanarak HTML sayfası içinde dinamik güncellemeler yapabilirsiniz.

addClass & removeClass aynı anda kullanmak

İlk önce tüm sınıfları kaldırabilir ve daha sonra güncel sınıfı dahil edebilirsiniz.

$(document).ready(function() {
  $("pre code").removeClass("language-css").addClass("language-html");
});

Bu sayede ise, tüm language-css sınıflarını language-html olarak güncelledik.

Yazar: Ercüment Çözer (@Felina)

2009 yılında gelen "internet için bir şeyler üretme isteği" doğrultusunda yazılım öğrenmeye başladım. Aradan geçen süre zarfında başta PHP ve Python olmak üzere, ticareti yapılabilir birçok şey öğrendim. Şu sıralar web ve mobil ortamda kodlama, tasarlama ve pazarlama konularındaki bilgilerimi pekiştirmek ve ihtiyaç halinde diğer insanlara da yardımcı olabilmek için KodLab.org'u kurdum. Freelance olarak kendi projelerimle ilgileniyorum.