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

Question

$("*").click(function(){
    $(this); // how can I get selector from $(this) ?
});

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

Answer 1

http://www.selectorgadget.com/ - это букмарклет, специально разработанный для этого варианта использования.

Тем не менее, я согласен с большинством других людей в том, что вы должны просто изучить селекторы CSS самостоятельно, пытаясь сгенерировать их с помощью кода, не является устойчивым. :)

Answer 2

Я добавил некоторые исправления в исправление @ jessegavin.

Это вернется сразу, если на элементе есть идентификатор. Я также добавил проверку атрибута имени и селектор nth-child, если у элемента нет идентификатора, класса или имени.

Имя может нуждаться в области видимости в случае, если на странице несколько форм и есть похожие входные данные, но я еще не справился с этим.

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

Answer 3

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>

Answer 4

Это не покажет вам путь DOM, но выведет строковое представление того, что вы видите, например, в отладчике chrome, при просмотре объекта.

$('.mybtn').click( function(event){
    console.log("%s", this);    // output: "button.mybtn"
});

https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object

Answer 5

Принимая во внимание некоторые ответы, прочитанные здесь, я хотел бы предложить следующее:

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?

Answer 6

Как насчет:

var selector = "*"
$(selector).click(function() {
    alert(selector);
});

Я не верю, что jQuery хранит использованный текст селектора. В конце концов, как бы это сработало, если бы вы сделали что-то вроде этого:

$("div").find("a").click(function() {
    // what would expect the 'selector' to be here?
});

Answer 7

Лучший ответ будет

var selector = '#something';

$(selector).anything(function(){
  console.log(selector);
});

Answer 8

Спасибо, 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);

Answer 9

Вы пытаетесь получить имя текущего тега, по которому щелкнули?

Если это так, сделайте это ..

$("*").click(function(){
    alert($(this)[0].nodeName);
});

Вы не можете получить «селектор», «селектор» в вашем случае - *.