Jquery ile .hasClass() Kullanımı

Bu makalemizde jquery’nin çok kullanın metodlarından bir tanesinden bahsedeceğim. Jquery ile “.hasClass() ” çoğu projede oldukça kolaylık sağlamaktadır.

.hasClass() ile sayfanızda bulunan istediğiniz her hangi bir html etiketine bağlı class’ı bulabilirsiniz. Yani var mı yok mu diye kontrol edip sonucuna göre işlem yapabilirsiniz.

Aşağıda yaptığım örneğin demosuna makalenin altında ki “Demo” butonuna tıklayarak ulaşabilirsiniz.

Benim örneğimde ki senaryo şu şekilde ;

Sayfamda 1 input, 1 buton, 2 adet div var. 
1. Div’in class’ı “serdar”.
2. div’in class’ı “karaca”.
Butonun id’si “btn_test”.
input’un id’si “txt_input1”.

input’a aradığımız class adını yazıp butona tıkladığımızda, sayfada yazdığımız class adı ile eşleşen var mı yok mu diye kontrol edip sonucu alert olarak göstereceğim.  

Html sayfamız ;

<style type="text/css">
    .serdar {
        width: 150px;
        height: 50px;
        background-color: orange;
    }

    .karaca{
        width: 75px;
        height: 50px;
        background-color: coral;
    }

</style>

<input type="text" value="serdar" />
<input type="button" value="Test Et" />

<div class="serdar">div class 'serdar' < /div>
<div class="karaca">div class 'karaca' < /div>

  Jquery tarafı ;  

$('#btn_test').click(function () {
   var input = $('#txt_input1').val();
   var sonuc = $("div").hasClass(input);
   if (sonuc){
       alert(" --- " + input + " --- div'i bulundu...");
   }
   else
   {
       alert("Belirttiğiniz  --- " + input + " --- classına ait her hangi bir div bulunamadı...");
   }
});