100 votos

¿Cómo puedo obtener selector de objeto jQuery

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

¿Hay manera fácil de obtener selector de $(this) o algo por el estilo? Hay una manera, cómo seleccionar el elemento selector, pero , ¿qué te selector de elemento?

Gracias por la ayuda =)

53voto

jessegavin Puntos 20854

Ok, así que en un comentario anterior la pregunta asker Fidilip dijo que lo que él/ella realmente después de la es conseguir que la ruta de acceso al elemento actual.

He aquí un script que va a "subir" el DOM antepasado de árbol y, a continuación, generar bastante específica selector incluyendo cualquier id o class atributos del elemento pulsado.

Ver en jsFiddle: http://jsfiddle.net/Jkj2n/56/

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(function() {
      $("*").click(function() {
        var selector = $(this).parents()
                    .map(function() { return this.tagName; })
                    .get().reverse().join(" ");

        if (selector) { 
          selector += " "+ $(this)[0].nodeName;
        }

        var id = $(this).attr("id");
        if (id) { 
          selector += "#"+ id;
        }

        var classNames = $(this).attr("class");
        if (classNames) {
          selector += "." + $.trim(classNames).replace(/\s/gi, ".");
        }

        alert(selector);
        return false;
      });
    });
    </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>

Por ejemplo, si desea haga clic en el 2º de la lista anidada elemento de lista en el código HTML de abajo, se obtiene el siguiente resultado:

HTML BODY UL LI UL LI#sub2.subitem.otherclass

27voto

Anurag Puntos 66470

AVISO .selector de versión obsoleta: 1.7, eliminado: 1.9

El objeto jQuery tiene un selector de la propiedad vi cuando la excavación en su código de ayer. No sé si se define en los documentos se lo fiable que es el futuro de corrección). ¡Pero funciona!

$('*').selector // returns *

Edit: Si se va a encontrar el selector en el interior del evento, que la información debe, idealmente, ser parte del evento en sí y no el elemento debido a que un elemento puede tener varios eventos de clic asignados a través de varios selectores. Una solución sería utilizar un wrapper alrededor bind(), click() etc. agregar eventos en lugar de agregar directamente.

jQuery.fn.addEvent = function(type, handler) {
    this.bind(type, {'selector': this.selector}, handler);
};

El selector se pasa como un objeto de propiedad del nombrado selector. Acceso como event.data.selector.

Vamos a intentarlo en algunos de marcado (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
});

Descargo de responsabilidad: Recuerde que como con live() acontecimientos, el selector de la propiedad puede ser no válida si DOM recorrido son los métodos utilizados.

<div><a>a link</a></div>

El siguiente código NO funcionará, como live se basa en el selector de la propiedad que en este caso es a.parent() - un selector no válido.

$('a').parent().live(function() { alert('something'); });

Nuestro addEvent método fuego, pero usted también verá el mal selector - a.parent().

21voto

Will Puntos 1833

En colaboración con @drzaus hemos llegado a la siguiente plugin de 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);

Record De Javascript

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

Uso y Trampas

<html>
    <head>...</head>
    <body>
        <div id="sidebar">
            <ul>
                <li>
                    <a href="http://stackoverflow.com/" 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>

El violín w/ tests QUnit

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

6voto

Abhilash V Puntos 357

Intenta esto ?

 $("*").click(function(){
    $(this).attr("id"); 
 });

0voto

Phil Rykoff Puntos 6650

Puedes cadena de los comandos, por ejemplo:

$(this).$("a").css("display", "none");

Esto podría ocultar todos los enlaces que son descendientes del elemento seleccionado.

Pero, ¿por qué desea agregar un evento de tipo "clic" sobre CADA elemento de la página html?

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X