javascript - all - jquery selector
¿Cómo puedo obtener el selector del objeto jQuery? (18)
::ADVERTENCIA::
.selector ha quedado obsoleto a partir de la versión 1.7, eliminado a partir de 1.9
El objeto jQuery tiene una propiedad de selector que vi al cavar en su código ayer. No sé si está definido en los documentos qué tan confiable es (para futuras pruebas). ¡Pero funciona!
$(''*'').selector // returns *
Editar : si buscara el selector dentro del evento, esa información idealmente debería ser parte del evento en sí y no del elemento porque un elemento podría tener múltiples eventos de clic asignados a través de varios selectores. Una solución sería usar una envoltura alrededor de bind() , click() etc. para agregar eventos en lugar de agregarlo directamente.
jQuery.fn.addEvent = function(type, handler) {
this.bind(type, {''selector'': this.selector}, handler);
};
El selector se pasa como propiedad de un objeto llamado selector . Acceda a él como event.data.selector .
Probémoslo en algunas marcas ( 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 al igual que con los eventos en live() , la propiedad del selector puede no ser válida si se utilizan los métodos de cruce DOM.
<div><a>a link</a></div>
El siguiente código NO funcionará, ya que live depende de la propiedad del selector, que en este caso es a.parent() - un selector inválido.
$(''a'').parent().live(function() { alert(''something''); });
Nuestro método addEvent se activará, pero usted también verá el selector incorrecto - a.parent() .
$("*").click(function(){
$(this); // how can I get selector from $(this) ?
});
¿Hay una manera fácil de obtener el selector de $(this) ? Hay una manera de seleccionar un elemento por su selector, pero ¿qué hay de obtener el selector de elemento ?
¿Estás tratando de obtener el nombre de la etiqueta actual que se hizo clic?
Si es así, haz esto ...
$("*").click(function(){
alert($(this)[0].nodeName);
});
Realmente no puede obtener el "selector", el "selector" en su caso es * .
¿Has intentado esto?
$("*").click(function(){
$(this).attr("id");
});
Agregué algunas correcciones a la solución de @ jessegavin.
Esto volverá de inmediato si hay una identificación en el elemento. También agregué una verificación de atributo de nombre y un selector n-child en caso de que un elemento no tenga identificación, clase o nombre.
El nombre puede necesitar un alcance en caso de que haya varios formularios en la página y tenga entradas similares, pero aún no manejé eso.
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;
}
Bueno, escribí este simple plugin jQuery.
Esto comprueba la identificación o el nombre de la clase, y trata de dar el mayor selector posible.
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;
}
Código JavaScript para el mismo, en caso de que alguien lo necesite, según lo necesite. Esto solo es la traducción de la respuesta seleccionada anteriormente.
<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>
En colaboración con @drzaus, hemos creado el siguiente complemento 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 reducido
// http://.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 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 pruebas
Esto no le mostrará la ruta DOM, pero mostrará una representación de cadena de lo que ve, por ejemplo, en el depurador de Chrome, cuando visualiza un objeto.
$(''.mybtn'').click( function(event){
console.log("%s", this); // output: "button.mybtn"
});
https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object
Esto puede hacer que la ruta del selector de elementos HTML haga clic en
$("*").on("click", function() {
let selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->");
alert(selectorPath);
return false;
});
La mejor respuesta sería
var selector = ''#something'';
$(selector).anything(function(){
console.log(selector);
});
Lancé un plugin jQuery: jQuery Selectorator , puedes obtener un selector como este.
$("*").on("click", function(){
alert($(this).getSelector().join("/n"));
return false;
});
Obtuve múltiples elementos incluso después de las soluciones anteriores, por lo que amplié el trabajo de dds1024, para obtener aún más elementos dom que apuntan a los puntos.
p. ej., DIV: nth-child (1) DIV: nth-child (3) DIV: nth-child (1) ARTÍCULO: 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)
Código:
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;
}
Ok, entonces, en un comentario sobre la pregunta que hace Fidilip dijo que lo que él / ella realmente Fidilip es obtener el camino hacia el elemento actual.
Aquí hay una secuencia de comandos que "escalará" el árbol ancestro DOM y luego creará un selector bastante específico que incluirá class atributos de id o class en el elemento en el que se haga clic.
Véalo trabajando en 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>
Por ejemplo, si hiciera clic en el elemento de la lista anidada de la 2da lista en el HTML a continuación, obtendría el siguiente resultado:
HTML>BODY>UL>LI>UL>LI#sub2.subitem.otherclass
Prueba esto:
$("*").click(function(event){
console.log($(event.handleObj.selector));
});
Qué tal si:
var selector = "*"
$(selector).click(function() {
alert(selector);
});
No creo que jQuery almacene el texto del selector que se usó. Después de todo, ¿cómo funcionaría si hicieras algo como esto?
$("div").find("a").click(function() {
// what would expect the ''selector'' to be here?
});
Simplemente agregue una capa sobre la función $ de esta manera:
$ = (function(jQ) {
return (function() {
var fnc = jQ.apply(this,arguments);
fnc.selector = (arguments.length>0)?arguments[0]:null;
return fnc;
});
})($);
Ahora puedes hacer cosas como
$("a").selector y devolverá "a" incluso en las versiones jQuery más nuevas.
Tomando en cuenta algunas respuestas leídas aquí, me gustaría proponer esto:
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;
}
Tal vez sea útil para crear un plugin jQuery?
http://www.selectorgadget.com/ es un bookmarklet diseñado explícitamente para este caso de uso.
Dicho esto, estoy de acuerdo con la mayoría de las otras personas en que usted solo debe aprenderse a seleccionar los selectores de CSS usted mismo, tratando de generarlos con el código no es sostenible. :)