Как я могу получить селектор из объекта jQuery - PullRequest
Новая
       84

Как я могу получить селектор из объекта jQuery

104 голосов
/ 11 марта 2010 
$("*").click(function(){
    $(this); // how can I get selector from $(this) ?
});

Есть ли простой способ получить селектор из $(this)? Есть способ выбрать элемент по его селектору, но как насчет получения селектора из элемента ?

Ответы [ 19 ]

55 голосов
/ 11 марта 2010

Хорошо, поэтому в комментарии выше вопрос, который задает вопрос 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

28 голосов
/ 11 марта 2010

:: 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().

21 голосов
/ 25 марта 2013

В сотрудничестве с @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);

Минимизированный Javascript 

// /1598357/kak-ya-mogu-poluchit-selektor-iz-obekta-jquery
!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)

Использование и Gotchas 

<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>

Fiddle w / QUnit тесты

http://jsfiddle.net/CALY5/5/

5 голосов
/ 04 декабря 2012

Вы пробовали это? 

 $("*").click(function(){
    $(this).attr("id"); 
 });
2 голосов
/ 20 октября 2017

Просто добавьте слой поверх функции $ следующим образом: 

$ = (function(jQ) { 
	return (function() { 
		var fnc = jQ.apply(this,arguments);
		fnc.selector = (arguments.length>0)?arguments[0]:null;
		return fnc; 
	});
})($);

Теперь вы можете делать что-то вроде 

$("a").selector
и возвращать «а» даже в более новых версиях jQuery.
2 голосов
/ 10 августа 2013

Я выпустил плагин jQuery: jQuery Selectorator , вы можете получить селектор вот так. 

$("*").on("click", function(){
  alert($(this).getSelector().join("\n"));
  return false;
});
2 голосов
/ 10 февраля 2016

Попробуйте это: 

$("*").click(function(event){
    console.log($(event.handleObj.selector));
 });
1 голос
/ 29 июля 2017

Ну, я написал этот простой плагин jQuery.

Это проверяет идентификатор или имя класса и пытается дать как можно больше точных селекторов. 

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;
}
1 голос
/ 25 января 2017

Это может дать вам путь селектора для элемента HTML, по которому щелкнули, - 

 $("*").on("click", function() {

    let selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->");

    alert(selectorPath);

    return false;

});
1 голос
/ 28 декабря 2015

Я получал несколько элементов даже после вышеперечисленных решений, поэтому я расширил работу dds1024, чтобы еще более точно указать элемент dom.

например. 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: nth 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;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...