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>
<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>
<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>
Yorumunuzu Ekleyin
