2013-03-12 3 views
5

페이지의 각 요소에 대해 unqiue 선택기를 가져올 수 있어야합니다. 내가 요소를 클릭하면고유 선택기 jQuery 가져 오기

예를 들어

, 나는 이런 식으로 뭔가를 할 :

$(document).click(function(){ 
    var sel = getUniqueSel(this); 
}); 

하며,이 DB에 sel 값을 저장 한 후 내가 그 가치를 얻을 수 있으며, 단순히

하여 요소에 액세스

var el = $(sel);

나는 변경할 수 없습니다 및 페이지의 HTML 구조에 대해 아무것도 모르는이 비효율적으로 단순히 모든 요소에 고유 한 ID의 (사용 JS)를 추가 할 수 없습니다.

+1

? 그냥 궁금한가? 페이지의 모든 단일 개체에 관심이 있습니까? – mplungjan

+0

http://stackoverflow.com/questions/5442767/returning-the-full-path-to-an-element – mplungjan

+0

@mplungjan 페이지에있는 모든 클릭 된 요소에 대한 선택기를 저장하려는 경우 :)이 스크립트는 많은 페이지에 포함되어 있습니다. – Cristy

답변

6

또 다른 방법은 DOM 트리를 방황하고 저장하고 다시 선택으로 나중에 사용할 수있는 요소의 경로를 만들 수 있습니다, t하지만이 도움이 될 생각 모자는 방탄하지 않을 수도 있지만, 아마도 당신이 시작할 수있는 지점 일 것입니다.

편집 : 사용할 수

그냥 JSBin의 예를 방문하고 두 번 document를 클릭하면 지금은 ID를 반환 코멘트에있는 당신의 제안에 답을 업데이트했습니다. 만 강조됩니다 것을 알 ..

jQuery.fn.getPath = function() { 
    if (this.length != 1) throw 'Requires one element.'; 
    var path, node = this; 
    if (node[0].id) return "#" + node[0].id; 
    while (node.length) { 
     var realNode = node[0], 
      name = realNode.localName; 
     if (!name) break; 
     name = name.toLowerCase(); 
     var parent = node.parent(); 
     var siblings = parent.children(name); 
     if (siblings.length > 1) { 
      name += ':eq(' + siblings.index(realNode) + ')'; 
     } 
     path = name + (path ? '>' + path : ''); 
     node = parent; 
    } 
    return path; 
}; 
var sel; 
$(document) 
    .click(function (e, a) { 
    if (!sel) { 
     sel = $("#comment-21702402") 
      .getPath(); 
     alert("Path is: " + sel + ", hiding the Element -> Click again to highlight"); 
    } else { 
     $(sel) 
      .css("background-color", "yellow"); 
    } 
}); 
당신은 당신이 ID에 관심이있는 사람을 제공하지 못할 이유
+0

나는 또한'ID'를 검사 할 수 있으므로 div에 ID가 정의되어 있으면 선택기로 ID를 가져오고, 그렇지 않으면 경로를 가져옵니다. 나는 이것이 DB 저장 공간을 절약 할 것이라고 생각한다. – Cristy

0

이렇게하는 한 가지 방법은 클릭 한 요소에서 얻을 수있는 모든 정보를 얻는 것입니다. 당신이 클릭 한 요소 인 경우 : <div> I'm a div </div>

$(document).click(function(){ 
    var tagName = $(this).prev().prop('tagName'); 
    var attributes = {}; 
    if(this.length) { 
     $.each(this[0].attributes, function(index, attr) { 
      attributes[ attr.name ] = attr.value; 
     }); 
    } 
    var elText=$(this).html(); 
    saveToDB(tagName,attributes,elText); 
}); 

당신은 나중에 당신이 가진하거나 사용하는 속성을 사용하여 요소를 찾을 수 있습니다 데이터베이스에 저장할 때 그래서 당신은 예를 들어 텍스트로 저장할 수 있습니다

$(tagName+'['+attribute+'="'+value+'"]:contains("'+elText+'")') 

나는

+1

요소 콘텐츠를 저장하면 정말 비효율적입니다. – Cristy