dinmaik seçici eklemek için sayfadaki bir objenin tam yolunu bulmak isterseniz bu makaleyi ve demoyu inceleyebilirsiniz. örn: body div div table tr td label

demo : aşağıdaki site tasarımında işaretcinizi gezdirin ve seçiyi footerda görmek için tıklayın ;

yukarıdaki demonun kod kısmı ;

<div id="demo" style="width:80%;height:300px;margin:0 auto;">
<style type="text/css">#demo header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#demo nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#demo section {

    width:350px;
    float:left;
    padding:10px;
}
#demo footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>
<header>
<h1>City Gallery</h1>
</header>

<nav><a href="#">London</a><br />
<a href="#">Paris</a><br />
<a href="#">Tokyo</a></nav>

<section>
<h1>London</h1>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</section>

<footer>Copyright &copy; KarayelTasarim.com</footer>
</div>
<script>

 if ($("#tourstyle").length == 0) {
            $("head").append("<style id='tourstyle'>#demo *:hover{ outline:3px solid yellow;cursor:pointer}</style>");
//burada #demo *:hover seçicisi demo etiketinin altındaki herhangibir etiket için geçerli olacaktır; eğer sadece objenin kendisi seçilecekse ozaman stoppropagation methodu kullanabilirsiniz. 
        }
$("#demo").on("click","*",function(e){

 e.stopPropagation(); //sadece tıklanan objenin işlem görmesi için yazıldı. aksi durumda en üst parent a kadar kontrol edeceği için  herseferinde aynı sonucu dönecektir
e.preventDefault();
$("#demo footer").empty().append(getTagPath($(this)).trim());
return 0;

})
    function getTagPath(current) {
        var path = new Array();
        var realpath = "BODY";
        while ($(current).prop("tagName") != "BODY") {
            var index = $(current).parent().find($(current).prop("tagName")).index($(current));
            var name = $(current).prop("tagName");
            var selector = " " + name + ":eq(" + index + ") ";
            path.push(selector);
            current = $(current).parent();
        }
        while (path.length != 0) {
            realpath += path.pop();
        }
        return realpath;


    }
</script>

..: Happy Coding ..: