¿Puede jQuery proporcionar el nombre de la etiqueta?


115

Tengo varios elementos en una página HTML que tienen la misma clase, pero son tipos de elementos diferentes. Quiero averiguar el nombre de la etiqueta del elemento mientras lo recorro, pero .attr no acepta "etiqueta" o "nombre de etiqueta".

Esto es lo que quiero decir. Considere estos elementos en una página:

<h1 class="rnd">First</h1>
<h2 id="foo" class="rnd">Second</h2>
<h3 class="rnd">Third</h3>
<h4 id="bar" class="rnd">Fourth</h4>

Ahora quiero ejecutar algo como esto para asegurarme de que todos mis elementos tengan una identificación si una no estaba ya definida:

$(function() {
  $(".rnd").each(function(i) {
    var id = $(this).attr("id");
    if (id === undefined || id.length === 0) {
      // this is the line that's giving me problems.
      // .attr("tag") returns undefined
      $(this).attr("id", "rnd" + $(this).attr("tag") + "_" + i.toString());
    }
  });
});

El resultado que me gustaría sería que los elementos H2 y H4 tuvieran una identificación de

rndh2_1
rndh4_3

respectivamente.

¿Alguna idea sobre cómo puedo descubrir el nombre de la etiqueta del elemento representado por "esto"?


1
Quizás la respuesta está aquí: stackoverflow.com/a/8355251/271103
Hakan KOSE

Respuestas:


110
$(this).attr("id", "rnd" + $(this).attr("tag") + "_" + i.toString());

debiera ser

$(this).attr("id", "rnd" + this.nodeName.toLowerCase() + "_" + i.toString());

18
Deberá usar this.nodeName.toLowerCase (), ya que la mayoría de las representaciones DOM de documentos HTML automáticamente ponen en mayúsculas el nombre del nodo.
NickFitz

tanto this.nodeName como this.tagName parecen funcionar para mí. ¡Gracias a todos!
BigPigVT

5
+1 por mencionar nodeName. A veces, jQuery está un paso demasiado lejos :-)
Serge Wautier

2
+1 jQuery is () no hace el trabajo porque en el caso de h1, h2, etc., hay 6 casos diferentes que debe manejar si usa is ().
Konstantin Dinev

166

Puedes probar esto:

if($(this).is('h1')){
  doStuff();
}

Consulte los documentos para obtener más información sobre is ().


12
A quién le interese: si rechaza mi respuesta, dígame por qué para que pueda mejorarla y aprender para futuras SO-respuestas. Gracias.
middus

3
Yo también lo odio. De todos modos, voté a favor porque nodeNamedevuelve una cadena que, según el navegador, está en mayúsculas o no.
Marcel Falliere

2
Suponga lo siguiente: no solo tiene una pequeña selección de etiquetas posibles, sino que podría ser cualquiera de más de 100 etiquetas html. Entonces necesitarías escribir: $ (this) .is ('sometag') a más de 100 veces. Supongo que esta es la razón por la que algunas personas rechazaron su respuesta.
ximi

Vaya ... nunca visto is('*')en años. Probablemente no responda al OP, pero funcionó para mí, ¡gracias, @middus!
Alastair

53

Desde que respondí a esta pregunta una vez antes y no me ayudó en mi caso (no thistenía una instancia de selector de jQuery, sino que tenía una). Al llamar get(), obtendrá el elemento HTML, mediante el cual puede obtener el nodeNamecomo se mencionó anteriormente.

this.nodeName; // In a event handler, 'this' is usually the element the event is called on

o

$('.hello:first-child').get(0).nodeName; // Use 'get' or simply access the jQuery Object like an array
$('.hello:first-child')[0].nodeName;     // will get you the original DOM element object

1
primero útil en la página
Gallo

47

También puede usar $(this).prop('tagName');si está usando jQuery 1.6 o superior.


Esto es exactamente lo que necesitaba. En mi diseño, tenía el elemento jquery a mano, pero no el elemento DOM HTML original. Esto funciona para mi.
Gilthans

Creo que esta es la respuesta exacta que responde al tema de esta pregunta.
CodeTweetie


1

Creo que no puede usar nodeNameen jQuery ya que nodeName es una propiedad DOM y jQuery en sí no tiene una nodeNamefunción o propiedad. Pero según el encuestado que mencionó por primera vez sobre estas nodeNamecosas, así es como pude resolver el problema:

this.attr("id", "rnd" + this.attr("nodeName") + "_" + i.toString());

NOTA: thisaquí hay un objeto jQuery.


0

Dado que esta es una pregunta que aparece en google usando jquery tagname first child como consulta, publicaré otro ejemplo:

<div><p>Some text, whatever</p></div>

$('div').children(':first-child').get(0).tagName); // ...and not $('div:first-child')[...]

El resultado de jquery es un nombre de etiqueta (en mayúsculas): P


0

Puede obtener el nombre de la etiqueta del elemento html en toda la página.

Podrías usar:

        $('body').contents().on("click",function () {
          var string = this.tagName;
          alert(string);
         });

0
you can try:
jQuery(this).get(0).tagName;
or
jQuery(this).get(0).nodeName;

nota: reemplace esto con su selector (h1, h3 o ...)


0

Lo acabo de escribir para otro número y pensé que podría ayudar a cualquiera de ustedes también.

Uso:

  • es decir onclick="_DOM_Trackr(this);"

Parámetros:

  1. DOM-Objeto para rastrear
  2. interruptor de retorno / alerta (opcional, predeterminado = alerta)

Código fuente:

function _DOM_Trackr(_elem,retn=false)
{
    var pathTrackr='';
    var $self=$(_elem).get(0);
    while($self && $self.tagName)
    {
        var $id=($($self).attr("id"))?('#'+$($self).attr("id")):'';
        var $nName=$self.tagName;
        pathTrackr=($nName.toLowerCase())+$id+((pathTrackr=='')?'':' > '+(pathTrackr));
        $self=$($self).parent().get(0);
    }
    if (retn)
    {
        return pathTrackr;
    }
    else
    {
        alert(pathTrackr);
    }
}

Salida de ejemplo:html > body > div#coreApp > div#productpage > div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input
Chris S.

Otro ejemplo de uso: $('*').each(function(_i,_e){$(_e).attr('title',_DOM_Trackr(_e,true));});
Chris S.

0

La mejor manera de solucionar su problema es reemplazar $(this).attr("tag")con this.nodeName.toLowerCase()o this.tagName.toLowerCase().

¡Ambos producen exactamente el mismo resultado!


0

Considere el método de FILTRO rápido :

$('.rnd').filter('h2,h4')

devoluciones:

[<h2 id=​"foo" class=​"rnd">​Second​</h2>​, <h4 id=​"bar" class=​"rnd">​Fourth​</h4>​]

entonces:

$('.rnd').filter('h2,h4').each(function() { /*...$(this)...*/ });

0

En su lugar, simplemente haz:

$(function() {
  $(".rnd").each(function(i) {
    var id = $(this).attr("id");
    if (id === undefined || id.length === 0) {
      // this is the line that's giving me problems.
      // .attr("tag") returns undefined
      // change the below line...
      $(this).attr("id", "rnd" + this.tagName.toLowerCase() + "_" + i.toString()); 
  });
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.