jQuery 객체에서 선택기를 어떻게 얻을 수 있습니까?
$("*").click(function(){
$(this); // how can I get selector from $(this) ?
});
선택기$(this) 를 얻는 쉬운 방법이 있습니까? 선택 자로 요소를 선택하는 방법이 있지만 요소에서 선택자를 가져 오는 것은 어떻습니까?
좋아, 질문 위의 주석에서 질문자 Fidilip는 그가 실제로 추구 하는 것은 현재 요소의 경로를 얻는 것입니다.
다음은 DOM 상위 트리를 "등반"한 다음 클릭 한 항목의 id또는 class속성을 포함하여 상당히 구체적인 선택기를 구축하는 스크립트입니다 .
jsFiddle에서 작동하는 것을보십시오 : http://jsfiddle.net/Jkj2n/209/
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$("*").on("click", function(e) {
e.preventDefault();
var selector = $(this)
.parents()
.map(function() { return this.tagName; })
.get()
.reverse()
.concat([this.nodeName])
.join(">");
var id = $(this).attr("id");
if (id) {
selector += "#"+ id;
}
var classNames = $(this).attr("class");
if (classNames) {
selector += "." + $.trim(classNames).replace(/\s/gi, ".");
}
alert(selector);
});
});
</script>
</head>
<body>
<h1><span>I love</span> jQuery</h1>
<div>
<p>It's the <strong>BEST THING</strong> ever</p>
<button id="myButton">Button test</button>
</div>
<ul>
<li>Item one
<ul>
<li id="sub2" >Sub one</li>
<li id="sub2" class="subitem otherclass">Sub two</li>
</ul>
</li>
</ul>
</body>
</html>
예를 들어 아래 HTML에서 두 번째 목록 중첩 목록 항목을 클릭하면 다음과 같은 결과가 나타납니다.
HTML>BODY>UL>LI>UL>LI#sub2.subitem.otherclass
:: WARNING ::
.selector는 버전 1.7에서 더 이상 사용되지 않으며 1.9에서 제거되었습니다.
jQuery 객체에는 어제 코드를 파헤칠 때 본 선택기 속성이 있습니다. 문서에 정의되어 있는지 여부가 (향후 교정을 위해) 얼마나 신뢰할 수 있는지 모릅니다. 하지만 작동합니다!
$('*').selector // returns *
편집 : 이벤트 내에서 선택기를 찾으려면 요소가 여러 선택기를 통해 할당 된 여러 클릭 이벤트를 가질 수 있으므로 해당 정보는 요소가 아닌 이벤트 자체의 일부 여야합니다. 해결책은 주위에 래퍼를 사용하는 것 bind(), click()직접 추가하는 대신 이벤트를 추가하는 등.
jQuery.fn.addEvent = function(type, handler) {
this.bind(type, {'selector': this.selector}, handler);
};
선택기가라는 개체의 속성으로 전달됩니다 selector. 로 액세스하십시오 event.data.selector.
일부 마크 업 ( http://jsfiddle.net/DFh7z/ ) 에서 시도해 보겠습니다 .
<p class='info'>some text and <a>a link</a></p>
$('p a').addEvent('click', function(event) {
alert(event.data.selector); // p a
});
면책 조항 : live()이벤트 와 마찬가지로 DOM 순회 메서드를 사용하면 selector 속성이 유효하지 않을 수 있습니다.
<div><a>a link</a></div>
live이 경우 a.parent()유효하지 않은 선택자인 선택기 속성에 의존 하므로 아래 코드는 작동하지 않습니다 .
$('a').parent().live(function() { alert('something'); });
우리의 addEvent메서드가 실행되지만 잘못된 선택기가 표시됩니다 a.parent().
@drzaus와 공동으로 다음과 같은 jQuery 플러그인을 만들었습니다.
jQuery.getSelector
!(function ($, undefined) {
/// adapted http://jsfiddle.net/drzaus/Hgjfh/5/
var get_selector = function (element) {
var pieces = [];
for (; element && element.tagName !== undefined; element = element.parentNode) {
if (element.className) {
var classes = element.className.split(' ');
for (var i in classes) {
if (classes.hasOwnProperty(i) && classes[i]) {
pieces.unshift(classes[i]);
pieces.unshift('.');
}
}
}
if (element.id && !/\s/.test(element.id)) {
pieces.unshift(element.id);
pieces.unshift('#');
}
pieces.unshift(element.tagName);
pieces.unshift(' > ');
}
return pieces.slice(1).join('');
};
$.fn.getSelector = function (only_one) {
if (true === only_one) {
return get_selector(this[0]);
} else {
return $.map(this, function (el) {
return get_selector(el);
});
}
};
})(window.jQuery);
축소 된 자바 스크립트
// http://stackoverflow.com/questions/2420970/how-can-i-get-selector-from-jquery-object/15623322#15623322
!function(e,t){var n=function(e){var n=[];for(;e&&e.tagName!==t;e=e.parentNode){if(e.className){var r=e.className.split(" ");for(var i in r){if(r.hasOwnProperty(i)&&r[i]){n.unshift(r[i]);n.unshift(".")}}}if(e.id&&!/\s/.test(e.id)){n.unshift(e.id);n.unshift("#")}n.unshift(e.tagName);n.unshift(" > ")}return n.slice(1).join("")};e.fn.getSelector=function(t){if(true===t){return n(this[0])}else{return e.map(this,function(e){return n(e)})}}}(window.jQuery)
사용법과 고차
<html>
<head>...</head>
<body>
<div id="sidebar">
<ul>
<li>
<a href="/" id="home">Home</a>
</li>
</ul>
</div>
<div id="main">
<h1 id="title">Welcome</h1>
</div>
<script type="text/javascript">
// Simple use case
$('#main').getSelector(); // => 'HTML > BODY > DIV#main'
// If there are multiple matches then an array will be returned
$('body > div').getSelector(); // => ['HTML > BODY > DIV#main', 'HTML > BODY > DIV#sidebar']
// Passing true to the method will cause it to return the selector for the first match
$('body > div').getSelector(true); // => 'HTML > BODY > DIV#main'
</script>
</body>
</html>
QUnit 테스트가있는 바이올린
이거 해봤 어?
$("*").click(function(){
$(this).attr("id");
});
jQuery 플러그인을 출시했습니다 : jQuery Selectorator , 이런 선택기를 얻을 수 있습니다.
$("*").on("click", function(){
alert($(this).getSelector().join("\n"));
return false;
});
이 시도:
$("*").click(function(event){
console.log($(event.handleObj.selector));
});
다음과 같이 $ 함수 위에 레이어를 추가하면됩니다.
$ = (function(jQ) {
return (function() {
var fnc = jQ.apply(this,arguments);
fnc.selector = (arguments.length>0)?arguments[0]:null;
return fnc;
});
})($);이제 다음과 같은 작업을 할 수 있습니다.
$ ( "a"). selector최신 jQuery 버전에서도 "a"를 반환합니다.
http://www.selectorgadget.com/ 은이 사용 사례를 위해 명시 적으로 설계된 북마크릿입니다.
즉, CSS 선택자를 직접 배워야하며 코드로 생성하려는 시도는 지속 가능하지 않다는 점에서 다른 대부분의 사람들과 동의합니다. :)
@jessegavin의 수정 사항에 몇 가지 수정 사항을 추가했습니다.
요소에 ID가 있으면 즉시 반환됩니다. 또한 요소에 ID, 클래스 또는 이름이없는 경우 이름 속성 검사와 n 번째 자식 선택기를 추가했습니다.
페이지에 여러 양식이 있고 유사한 입력이있는 경우 이름에 범위 지정이 필요할 수 있지만 아직 처리하지 않았습니다.
function getSelector(el){
var $el = $(el);
var id = $el.attr("id");
if (id) { //"should" only be one of these if theres an ID
return "#"+ id;
}
var selector = $el.parents()
.map(function() { return this.tagName; })
.get().reverse().join(" ");
if (selector) {
selector += " "+ $el[0].nodeName;
}
var classNames = $el.attr("class");
if (classNames) {
selector += "." + $.trim(classNames).replace(/\s/gi, ".");
}
var name = $el.attr('name');
if (name) {
selector += "[name='" + name + "']";
}
if (!name){
var index = $el.index();
if (index) {
index = index + 1;
selector += ":nth-child(" + index + ")";
}
}
return selector;
}
위의 솔루션 후에도 여러 요소를 얻었으므로 더 정확한 dom 요소를 위해 dds1024 작업을 확장했습니다.
예 : DIV : nth-child (1) DIV : nth-child (3) DIV : nth-child (1) 기사 : nth-child (1) DIV : nth-child (1) DIV : nth-child (8) DIV : nth-child (2) DIV : nth-child (1) DIV : nth-child (2) DIV : n 번째 -child (1) H4 : nth-child (2)
암호:
function getSelector(el)
{
var $el = jQuery(el);
var selector = $el.parents(":not(html,body)")
.map(function() {
var i = jQuery(this).index();
i_str = '';
if (typeof i != 'undefined')
{
i = i + 1;
i_str += ":nth-child(" + i + ")";
}
return this.tagName + i_str;
})
.get().reverse().join(" ");
if (selector) {
selector += " "+ $el[0].nodeName;
}
var index = $el.index();
if (typeof index != 'undefined') {
index = index + 1;
selector += ":nth-child(" + index + ")";
}
return selector;
}
클릭 한 HTML 요소의 선택기 경로를 얻을 수 있습니다.
$("*").on("click", function() {
let selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->");
alert(selectorPath);
return false;
});
글쎄요, 저는이 간단한 jQuery 플러그인을 작성했습니다.
이것은 ID 또는 클래스 이름을 확인하고 가능한 한 많은 정확한 선택자를 제공하려고합니다.
jQuery.fn.getSelector = function() {
if ($(this).attr('id')) {
return '#' + $(this).attr('id');
}
if ($(this).prop("tagName").toLowerCase() == 'body') return 'body';
var myOwn = $(this).attr('class');
if (!myOwn) {
myOwn = '>' + $(this).prop("tagName");
} else {
myOwn = '.' + myOwn.split(' ').join('.');
}
return $(this).parent().getSelector() + ' ' + myOwn;
}
클릭 된 현재 태그의 이름을 얻으려고합니까?
그렇다면 이렇게 ..
$("*").click(function(){
alert($(this)[0].nodeName);
});
실제로 "선택기"를 얻을 수 없습니다 *. 귀하의 경우 "선택기"는 입니다.
필요한 경우에 대비하여 동일한 Javascript 코드. 이것은 위에서 선택한 답변의 번역 일뿐입니다.
<script type="text/javascript">
function getAllParents(element){
var a = element;
var els = [];
while (a && a.nodeName != "#document") {
els.unshift(a.nodeName);
a = a.parentNode;
}
return els.join(" ");
}
function getJquerySelector(element){
var selector = getAllParents(element);
/* if(selector){
selector += " " + element.nodeName;
} */
var id = element.getAttribute("id");
if(id){
selector += "#" + id;
}
var classNames = element.getAttribute("class");
if(classNames){
selector += "." + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, ".");
}
console.log(selector);
alert(selector);
return selector;
}
</script>
여기에서 읽은 몇 가지 답변을 고려하여 이것을 제안하고 싶습니다.
function getSelectorFromElement($el) {
if (!$el || !$el.length) {
return ;
}
function _getChildSelector(index) {
if (typeof index === 'undefined') {
return '';
}
index = index + 1;
return ':nth-child(' + index + ')';
}
function _getIdAndClassNames($el) {
var selector = '';
// attach id if exists
var elId = $el.attr('id');
if(elId){
selector += '#' + elId;
}
// attach class names if exists
var classNames = $el.attr('class');
if(classNames){
selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.');
}
return selector;
}
// get all parents siblings index and element's tag name,
// except html and body elements
var selector = $el.parents(':not(html,body)')
.map(function() {
var parentIndex = $(this).index();
return this.tagName + _getChildSelector(parentIndex);
})
.get()
.reverse()
.join(' ');
if (selector) {
// get node name from the element itself
selector += ' ' + $el[0].nodeName +
// get child selector from element ifself
_getChildSelector($el.index());
}
selector += _getIdAndClassNames($el);
return selector;
}
jQuery 플러그인을 만드는 데 유용할까요?
p1nox 감사합니다!
내 문제는 양식의 일부를 수정하는 ajax 호출에 다시 초점을 맞추는 것이 었습니다.
$.ajax({ url : "ajax_invite_load.php",
async : true,
type : 'POST',
data : ...
dataType : 'html',
success : function(html, statut) {
var focus = $(document.activeElement).getSelector();
$td_left.html(html);
$(focus).focus();
}
});
함수를 jQuery 플러그인에 캡슐화해야했습니다.
!(function ($, undefined) {
$.fn.getSelector = function () {
if (!this || !this.length) {
return ;
}
function _getChildSelector(index) {
if (typeof index === 'undefined') {
return '';
}
index = index + 1;
return ':nth-child(' + index + ')';
}
function _getIdAndClassNames($el) {
var selector = '';
// attach id if exists
var elId = $el.attr('id');
if(elId){
selector += '#' + elId;
}
// attach class names if exists
var classNames = $el.attr('class');
if(classNames){
selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.');
}
return selector;
}
// get all parents siblings index and element's tag name,
// except html and body elements
var selector = this.parents(':not(html,body)')
.map(function() {
var parentIndex = $(this).index();
return this.tagName + _getChildSelector(parentIndex);
})
.get()
.reverse()
.join(' ');
if (selector) {
// get node name from the element itself
selector += ' ' + this[0].nodeName +
// get child selector from element ifself
_getChildSelector(this.index());
}
selector += _getIdAndClassNames(this);
return selector;
}
})(window.jQuery);
이것은 DOM 경로를 표시하지 않지만 객체를 볼 때 크롬 디버거에서 보는 것과 같은 문자열 표현을 출력합니다.
$('.mybtn').click( function(event){
console.log("%s", this); // output: "button.mybtn"
});
https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object
어때 :
var selector = "*"
$(selector).click(function() {
alert(selector);
});
jQuery가 사용 된 선택기 텍스트를 저장한다고 생각하지 않습니다. 결국 다음과 같은 작업을 수행하면 어떻게 작동할까요?
$("div").find("a").click(function() {
// what would expect the 'selector' to be here?
});
가장 좋은 대답은
var selector = '#something';
$(selector).anything(function(){
console.log(selector);
});
참고 URL : https://stackoverflow.com/questions/2420970/how-can-i-get-selector-from-jquery-object
'IT story' 카테고리의 다른 글
| jquery $ (window) .width () 및 $ (window) .height ()는 뷰포트의 크기가 조정되지 않은 경우 다른 값을 반환합니다. (0) | 2020.08.12 |
|---|---|
| .NET 용 텍스트 비교 / 병합 엔진이 있습니까? (0) | 2020.08.12 |
| 랜덤 클래스 스레드는 안전합니까? (0) | 2020.08.12 |
| 템플릿과 함께 인라인 키워드를 사용하는 것이 합리적입니까? (0) | 2020.08.12 |
| 파이썬에`string.split ()`의 생성기 버전이 있습니까? (0) | 2020.08.12 |