Как я могу получить селектор от объекта jQuery
$("*").click(function(){
$(this); // how can I get selector from $(this) ?
});
Есть ли простой способ получить селектор от $(this)? Существует способ выбрать элемент его селектором, но что относительно того, чтобы получить селектор от элемента?
4 ответа
Вы пытаетесь получить имя текущего тега, по которому щелкнули?
Если да, сделайте это ..
$("*").click(function(){
alert($(this)[0].nodeName);
});
Вы действительно не можете получить "selector", "selector" в вашем случае - * .
:: 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.
<div><a>a link</a></div>
Приведенный ниже код НЕ будет работать, поскольку live полагается на свойство селектора
, которое в данном случае является a.parent () - недопустимый селектор.
$('a').parent().live(function() { alert('something'); });
Наш метод addEvent сработает, но вы также увидите неправильный селектор - a.parent () .
Итак, в комментарии выше задавший вопрос 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
Как насчет:
var selector = "*"
$(selector).click(function() {
alert(selector);
});
Я не верю, что jQuery хранит использованный текст селектора. В конце концов, как бы это сработало, если бы вы сделали что-то вроде этого:
$("div").find("a").click(function() {
// what would expect the 'selector' to be here?
});