Konular

Kapsayan Tagı Silmek unwrap()

Bazen SEO için tagları bir başka tag içerisine gömmek zorunda kalırız. Fakat daha sonra bu gömen kod başımıza bela olabilir. JQuery ile bundan unwrap ile kurtulabiliriz.

Wraplamadan önceki kod:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

 

Wraplama içn JQuery kodu:
 
 $('.inner').wrap();

 

Yukardaki kodda classname inner olan tüm tagların bir üst taglarını sil demek istiyoruz. JQuery kodundan sonraki durum:

 

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

 

Aşağıdaki örnekte ID si diger_resimler olan DIV içerisindeki bütün IMG taglarını saran A tagından nasıl kurtuluruz buna dair bir örnek var. A taglarını SEO için kullanıyoruz ama yapacağımız uygulamadaki javascript işlemleri için bela çıkarmasınlar diye yok ediyoruz.

 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/tm/foto_galeri_temp1/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#ana_resim_img").load(function(){
            $("#diger_resimler img").unwrap();
        })
    });

</script>
<style type="text/css">
         #ana_resim_id { overflow:hidden; width:910px; height:400px; position: relative; z-index: 9999; }
         #ana_resim_img { position: relative; }
</style>

</head>
<body>

    <div style="margin-top:50px;">
        <div style="width:950px; height: 650px; margin:0 auto; background-color: #C5C5C5;">

            <div id="diger_resimler" style="overflow:hidden; padding:  0 20px 20px 20px;">
                <ul style="list-style-type: none;">
                   
                    <li style="float:left;">

                        <h4 style="display: none">Asil Cephe</h4>
                        <div style="display: none">Test</div>
                        <a href="/rs/ft/ftorj/test_2.jpg" title="Asil Cephe">
                            <img src="/rs/ft/test_2.jpg" alt="Test"/>
                        </a>
                    </li>
                   
                    <li style="float:left;">
                        <h4 style="display: none">Asil Cephe</h4>

                        <div style="display: none"></div>
                        <a href="/rs/ft/ftorj/asil_cephe_3.jpg" title="Asil Cephe">
                            <img src="/rs/ft/asil_cephe_3.jpg" alt=""/>
                        </a>
                    </li>
                   
                    <li style="float:left;">
                        <h4 style="display: none">Asil Cephe</h4>
                        <div style="display: none"></div>

                        <a href="/rs/ft/ftorj/asil_cephe_4.jpg" title="Asil Cephe">
                            <img src="/rs/ft/asil_cephe_4.jpg" alt=""/>
                        </a>
                    </li>
                   
                </ul>
            </div>

        </div>
    </div>

</body>
</html>
 

 Fonksiyondan sonraki durum:

 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/tm/foto_galeri_temp1/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#ana_resim_img").load(function(){
            $("#diger_resimler img").unwrap();
        })
    });

</script>
<style type="text/css">
         #ana_resim_id { overflow:hidden; width:910px; height:400px; position: relative; z-index: 9999; }
         #ana_resim_img { position: relative; }
</style>

</head>
<body>

    <div style="margin-top:50px;">
        <div style="width:950px; height: 650px; margin:0 auto; background-color: #C5C5C5;">

            <div id="diger_resimler" style="overflow:hidden; padding:  0 20px 20px 20px;">
                <ul style="list-style-type: none;">
                   
                    <li style="float:left;">

                        <h4 style="display: none">Asil Cephe</h4>
                        <div style="display: none">Test</div>

                            <img src="/rs/ft/test_2.jpg" alt="Test"/>

                    </li>
                   
                    <li style="float:left;">
                        <h4 style="display: none">Asil Cephe</h4>

                        <div style="display: none"></div>

                            <img src="/rs/ft/asil_cephe_3.jpg" alt=""/>

                    </li>
                   
                    <li style="float:left;">
                        <h4 style="display: none">Asil Cephe</h4>
                        <div style="display: none"></div>

                            <img src="/rs/ft/asil_cephe_4.jpg" alt=""/>

                    </li>
                   
                </ul>
            </div>

        </div>
    </div>

</body>
</html>
 

 

Kapsayan Tagı Silmek unwrap()

Yorumunuzu Ekleyin

Easy Slider Jquery Plugin

Jquery ile yapılmış mükkemmel sliderlardan birisi Easy Slider

26,796 Okunma Henüz yorum yapılmamış 25/07/2011 22:43:59

Jquery Tab Menu Örneği

Çok güzel hazırlanmış bir Jquery Tab Menu Uygulaması

23,087 Okunma Henüz yorum yapılmamış 30/07/2011 21:16:35

Jquery ile Basit Bir Slider

Jquery kullanarak yapılmış basit bir slider örneği

21,505 Okunma Henüz yorum yapılmamış 25/07/2011 22:20:05

Jquery İle Resim Boyutlandırma

Bir IMG tagının içinde bulunduğu DIV tağına göre yeniden boyutlandırılması, sayfanın genişliğinin değişmesi sonuçları değiştirecektir.

20,596 Okunma Henüz yorum yapılmamış 10/07/2011 04:24:25

Jquery ile Resim Ortalamak

Bir DIV tagı ile sınırlandırılmış bir alana bir IMG tagını ortalayarak yerleştirmek

17,343 Okunma Henüz yorum yapılmamış 10/07/2011 04:23:28

JQuery Seçicilerini Kullanmak (JQuery Selectors)

Bir HTML nesnesini, bir CSS clasını, bir ID ye sahip elemanı veya bir name'e sahip form nesnesini seçip nasıl JQuery efekti verebiliriz?

16,836 Okunma Henüz yorum yapılmamış 15/01/2014 19:09:39

JQuery ile Yapılmış Basit Image Zoom Örneği

Resmin üzerine gelince yan pencerede resmin zoom yapılması işlemi. w3school uygulamasının geliştirilmiş halidir.

1,204 Okunma Henüz yorum yapılmamış 16/06/2020 04:53:40 16/06/2020 04:54:06

Yükleniyor...