현재 요소 $ (this)의 JQUERY를 사용하여 선택기를 생성하는 방법?

Question

내 요구 사항은 사용자가 요소 위로 마우스를 움직일 때 그 요소의 선택자를 얻고 싶습니다. 현재 요소가 $ (this) 이고 $ (this)에 클래스 및 ID가 없다고 가정 해 보겠습니다. 이제이 요소의 참조를 나중에 JQUERY 또는 CSS Selector로 참조하고 싶습니다. 참고 : $ (element) 에 id 나 클래스를 할당 할 수 없다는 제한이 있습니다.

웹 페이지 모니터링을 위해 femtoo.com을 방문한 경우. 아래 그림에서 강조 표시된 선택 도구가 필요합니다. 내 요구 사항은 정확히 이와 비슷합니다. 도움말 Jquery에서 새로운 기능입니다.

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

Answer 2

당신이 여기에 집중 될 수있는 이벤트 핸들러를 사용하는 경우 .. 당신은 VAR에 그 텍스트 상자의 DOM 참조를 얻을 것이다 this 당신은 jQuery를 어떤을 적용하지 않고

$(this); 

Answer 3

처럼이 전달 호출 할 수 있습니다 클래스 : -

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