jquery - 鼠标上的复杂 CSS 选择器单击页面中 html 元素的任何部分

Question

我使用的是 Jquery 1.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>

当我点击 anchor 标记“catch”上的 html 元素时，上述代码的输出将是

DIV#mySDIV.FT DIV.product A.eq(2)

我能够得到输出直到低于

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);
    });

我无法遍历子节点并计算单击元素的兄弟节点

请帮帮我

Answer 1

http://jsfiddle.net/earlonrails/LCUzy/9/

 $('*').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);
});
​