Jquery 复杂Css选择器鼠标点击页面中html元素的任何部分

我使用的是jQuery1.7.2。 我想得到如下所示的输出鼠标点击网页上的任何html元素

假设Html代码为：>

<div id ="mySDiv" class="FT">
    <div class="product">
        <a href="#">Try</a>
        <a href="#">catch</a>
        <a href="#">Throw</a>
    </div>
</div>

我可以得到以下输出

DIV#mySDIV.FT DIV.product

编写的代码实现了到目前为止的输出

    $(document).click(function (e) {
        e.preventDefault();
        var $parents = $(e.target).parentsUntil('[id]');
        var tagNames = $parents.add($parents.parent())
    .map(function () {
        myCssSelector;
        var tagId = $(this).attr("id"); ;
        if (tag) {
            myCssSelector = this.tagName + "#" + tagId;
            var myClassName = $(this).attr("class");
            if (myClassName) {
                myCssSelector = myCssSelector + "." + myClassName;
            }
            else {
                myCssSelector = myCssSelector + " ";
            }
        }
        else {
            myCssSelector = this.tagName;
            var myClassName = $(this).attr("class");
            if (myClassName) {
                myCssSelector = myCssSelector + "." + myClassName;
            }
            else {
                myCssSelector = myCssSelector + " ";
            }
        }
        return myCssSelector;
    }).get().join(',');
        console.log(tagNames);
    });

我无法在子节点上横切并计算单击元素的兄弟节点

请帮帮我

---

我不知道实际的问题是什么…我可以从单击的元素一直到父元素，直到它在标记中获得id属性，但我还想检查单击的元素是否有子元素，如果是，检查它有多少个同级元素，以及它在什么索引处准确显示。我没有使用Rails获得可接受的输出此代码。使用检查并查看控制台。单击每个链接时，我会看到DIV#侧边栏BODY HTML DIV.module question stats BODY HTML DIV.taged BODY HTML。您是否检查了JSFIDDLE？是的，您得到的输出也可以通过我的代码实现。diffucult部分是获取一个.post-tag:eq（2），在这里，这个新版本将为您提供嵌套元素的索引

    $(document).click(function (e) {
        e.preventDefault();
        var $parents = $(e.target).parentsUntil('[id]');
        var tagNames = $parents.add($parents.parent())
    .map(function () {
        myCssSelector;
        var tagId = $(this).attr("id"); ;
        if (tag) {
            myCssSelector = this.tagName + "#" + tagId;
            var myClassName = $(this).attr("class");
            if (myClassName) {
                myCssSelector = myCssSelector + "." + myClassName;
            }
            else {
                myCssSelector = myCssSelector + " ";
            }
        }
        else {
            myCssSelector = this.tagName;
            var myClassName = $(this).attr("class");
            if (myClassName) {
                myCssSelector = myCssSelector + "." + myClassName;
            }
            else {
                myCssSelector = myCssSelector + " ";
            }
        }
        return myCssSelector;
    }).get().join(',');
        console.log(tagNames);
    });

 $('*').click(function(e){
    var tagId = $(this).attr("id");    
    if (tagId) {
        myCssSelector = this.tagName + "#" + tagId;
        var myClassName = $(this).attr("class");
        if (myClassName) {
            myCssSelector = myCssSelector + "." + myClassName;
        } else {
            myCssSelector = myCssSelector + " ";
        }
    } else {
        myCssSelector = this.tagName;
        var myClassName = $(this).attr("class");
        if (myClassName) {
            myCssSelector = myCssSelector + "." + myClassName;
        } else {
            myCssSelector = myCssSelector + " " + $(this).index();
        }
    }
    console.log(myCssSelector);
});
​