如何使用当前元素 $(this) 的 JQUERY 生成选择器？答案

【问题标题】：how to Generate a selector using JQUERY of Current Element $(this)?如何使用当前元素 $(this) 的 JQUERY 生成选择器？
【发布时间】：2014-01-15 22:31:51
【问题描述】：

我的要求是当用户在元素上移动鼠标时我想得到那个元素的选择器。假设我当前的元素是 $(this) 并且 $(this) 没有任何类和 ID。现在我想稍后通过 JQUERY 获取该元素的引用或 CSS 选择器。注意：限制是我不能分配 $(element) 任何 id 或类。

如果您访问 femtoo.com 以监控网页。我想要下图中突出显示的选择器。我的要求与此完全相似。任何帮助请我是 Jquery 的新手。

【问题讨论】：

我得到了这个的参考。但我不知道如何生成选择器。如果 $(this) 有一个 #Id 很好，但如果它没有 Id 和 Uniqe 类名怎么办，那么我想生成选择器来帮助以后识别这个帮助。
您能访问 femtoo.com 吗？在 femtoo 中，用户选择一个像 firebug 这样的元素，然后 femtoo 生成该元素的 CSS 选择器，如上图所示。
我只想生成当前 $(this) 元素的 CSS 或 Jquery 选择器。请分享任何想法？谢谢
你能用这个api.jquery.com/selector

标签： jquery html css css-selectors

【解决方案1】：

您需要从节点向上遍历 DOM 树到根元素，但如果元素没有 ID 属性，则创建明确的选择器并不容易。

您还没有发布任何代码，所以您不应该真的期待一个解决方案，但我以前做过类似的事情，可能会在这里发布。

演示：http://jsfiddle.net/N7Rrh/2/

document.documentElement.addEventListener('click', function(e){
    var node = e.target, 
        parents = [], 
        selector = [];

        /* Build a list of ancestors up to the documentElement */
        while( node.parentNode ){
             parents.push( node );
             node = node.parentNode;
        }

    /* go over the ancestors list in reverse order, skipping the last two (HTML and BODY elements).
      use i = parents.length - 2 to include the BODY element. */
    for( var i = parents.length - 3; i >= 0; i-- ){
        var nodename, id, classname, siblings, index, selectorstring;
        // assign currently processed element to the node variable
        node = parents[i];
        // get the tag name, make it lowercase
        nodename = node.nodeName.toLowerCase();
        // if given node has an id let's use it as it's the best choice
        if( node.id ){
             selectorstring = nodename + '#' + node.id;   
        }
        // otherwise get as much info as needed
        else {
            // class name:
            classname = node.className
                        // remove leading and trailing white space
                        .replace(/^\s*|\s*$/g,'') 
                        // replace remaining spaces with dots
                        .replace(/\s+/g,'.');

            // nth-child / first child. 
            // get all the siblings  (children of parent node) 
            // and turn the nodeList to an Array
            siblings = [].slice.call( parents[i+1].children );
            // ... and find current node in that array
            index = siblings.indexOf( node );
            // now combine the info:
            selectorstring = nodename +
                            // add leading dot to the class name if there's a class name
                            (classname != '' ? '.' + classname : '') +
                            // append first-child or nth-child(n) string
                            (index===0?':first-child':':nth-child('+index+')');
        }
        selector.push( selectorstring );
    }
    // now join the selectors of particular elements as direct child selectors
    selector = selector.join('>');
    console.log( selector );
    return selector;
});

【讨论】：

【解决方案2】：

如果您正在使用任何事件处理程序，可能会关注这里.. 您将在 var this 中获得该文本框的 dom 引用，然后您可以调用 jQuery 传递这个类似

$(this);

【讨论】：

【解决方案3】：

不应用任何类：-

 $(this).css('border','solid 1px red');

【讨论】：