[jQuery] Getting element index, then adding text later to that index location

[jQuery] Getting element index, then adding text later to that index location


I want to get an element by an unique index, then at a later time do
something to that element, such as add text.
I was trying the following code:
    $(document).ready(function(){
        $("*", document.body).click(function () {
            var index = $("*", document.body).index(this);
            $("*:eq(" + index +")", document.body).css("color", "red");
        });
    });
But when I click, it adds the red text color to all parents too. I
changed the code too print the index number and it appends several
index numbers to the element I click and the parents.
I want to get the index number of the top most element that I click
on. That element may have children or may not.
So, how do I get only the top most element index that I clicked on?