<\/div>\n
HTML nesnelerine dinamik bir \u015fekilde ula\u015fmam\u0131z\u0131 sa\u011flayan JQuery ile ula\u015ft\u0131\u011f\u0131m\u0131z o anki nesnenin bulundu\u011fu \u00fcst elemanlara ula\u015fmay\u0131 parent fonksiyonu ile ger\u00e7ekle\u015ftirebilir.Bu makalemizin i\u00e7eri\u011fi bu fonksiyonun geni\u015f kullan\u0131m\u0131n\u0131 i\u00e7ermektedir.<\/p>\n
\r\n<div id="UstDiv">\r\n    <span id="BilgiA">Bilgi A<\/span>\r\n    <div id="OrtaDiv">\r\n        <span id="BilgiB">Bilgi B<\/span>\r\n        <div id="AltDiv">\r\n            <a href="#" id="LinkA" name="1">Link A<\/a>\r\n            <a href="#" id="LinkB" name="2">Link B<\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\nYukar\u0131daki HTML kod blo\u011funu \u00f6rnek olarak ele alaca\u011f\u0131z.<\/p>\n
\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $("#LinkB").click(function () {\r\n            var ID = $(this).attr('name');\r\n            alert(ID);\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nBurada, id de\u011feri “LinkB” olan nesneye t\u0131kland\u0131\u011f\u0131nda name \u00f6zelli\u011finde bulunan de\u011feri al\u0131p alert metoduyla yazd\u0131rm\u0131\u015f olduk.<\/p>\n
Peki, ben ayn\u0131 nesneye t\u0131kland\u0131\u011f\u0131 zaman o nesneden \u00e7\u0131k\u0131p id de\u011feri “LinkA” olan nesneye nas\u0131l ula\u015fabilirim?<\/p>\n
\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $("#LinkB").click(function () {\r\n            var LinkA = $(this).parent("div").find("#LinkA");\r\n            var ID = LinkA.attr('name');\r\n            alert(ID);\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nBurada g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, id de\u011feri “LinkB” olan elemana t\u0131kland\u0131\u011f\u0131 zaman, id de\u011feri “LinkA” olan elemana ula\u015f\u0131l\u0131p name \u00f6zelli\u011findeki de\u011fer elde edilip alert ile yazd\u0131r\u0131lm\u0131\u015ft\u0131r.\u015eimdi burada komutlar\u0131 izah edelim.<\/p>\n
\n$(this)<\/strong> : Bu komut o anda i\u00e7inde bulunulan eleman\u0131 sembolize eder.<\/li>\n
$(this).parent(“div”)<\/strong> : Bu komut o anda i\u00e7inde bulunulan eleman\u0131n parent(“div”) metodu ile i\u00e7inde bulundu\u011fu bir \u00fcst div nesnesine ula\u015ft\u0131r\u0131r.<\/li>\n
$(this).parent(“div”).find(“#LinkA”)<\/strong> : Bu komut o anda i\u00e7inde bulunulan eleman\u0131n parent(“div”) metodu ile i\u00e7inde bulundu\u011fu bir \u00fcst div nesnesine ula\u015ft\u0131r\u0131r ve o div i\u00e7inde id de\u011feri “LinkA” olan eleman\u0131 getirir.<\/li>\n<\/ul>\n\u015eimdi de, “LinkB” ye t\u0131kland\u0131\u011f\u0131nda “OrtaDiv” i\u00e7indeki “BilgiB” ye veri yazd\u0131ral\u0131m.<\/p>\n
\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $("#LinkB").click(function () {\r\n            var BilgiB = $(this).parent("div").parent("div").find("#BilgiB");\r\n            BilgiB.html("Link B t\u0131kland\u0131");\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nKomutlar\u0131 izah edelim.<\/p>\n
\n$(this).parent(“div”).parent(“div”).find(“#BilgiB”)<\/strong> : Bu komut o anda i\u00e7inde bulunulan eleman\u0131n, bir \u00fcst\u00fcndeki div nesnesinin, bir \u00fcst\u00fcndeki div nesnesine gider ve en son o div nesnesi i\u00e7indeki id de\u011feri “BilgiB” olan eleman\u0131 se\u00e7er.<\/li>\n<\/ul>\nSon olarakta “LinkA” ya t\u0131kland\u0131\u011f\u0131nda “BilgiA” y\u0131 de\u011fi\u015ftirelim.<\/p>\n
\r\n<script type="text\/javascript">\r\n    $(document).ready(function () {\r\n        $("#LinkA").click(function () {\r\n            var BilgiA = $(this).parent("div").parent("div").parent("div").find("#BilgiA");\r\n            BilgiA.html("Link A t\u0131kland\u0131");\r\n        });\r\n    });\r\n<\/script>\r\n<\/pre>\nEvet, g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi parent fonksiyonu ile \u00fcst elementlere ula\u015f\u0131p her t\u00fcrl\u00fc i\u015flemi ger\u00e7ekle\u015ftirebiliyoruz.Bu fonksiyonu genellikle tablo listelemelerinde veri silindikten sonra dinamik olarak ilgili veriye ait sat\u0131r\u0131 silmek i\u00e7in tercih edebilir ya da buna benzer bir \u00e7ok yerde kullanabilirsiniz.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML nesnelerine dinamik bir \u015fekilde ula\u015fmam\u0131z\u0131 sa\u011flayan JQuery ile ula\u015ft\u0131\u011f\u0131m\u0131z o anki nesnenin bulundu\u011fu \u00fcst elemanlara ula\u015fmay\u0131 parent fonksiyonu ile ger\u00e7ekle\u015ftirebilir.Bu makalemizin i\u00e7eri\u011fi bu fonksiyonun geni\u015f kullan\u0131m\u0131n\u0131 i\u00e7ermektedir. <div id="UstDiv"> <span id="BilgiA">Bilgi A<\/span> <div...<\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,18,19],"tags":[265,748,767],"class_list":["post-3226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-javascript","category-jquery","tag-javascript-2","tag-jquery","tag-parent"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=3226"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3226\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=3226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}