Question

我在HTML页面上有几个具有相同类的元素 - 但它们是不同的元素类型。我想找出元素的标记名称，因为我循环遍历它们 - 但.attr不带“tag”或“tagname”。

这就是我的意思。在页面上考虑这些元素：

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

现在我想运行这样的东西，以确保我的元素都有一个id，如果还没有定义：

$(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());
    }
  });
});

我希望结果是H2和H4元素的id为

rndh2_1
rndh4_3

分别

关于如何发现“this”所代表的元素的标记名称的任何想法？

Answer 1

你可以试试这个：

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

有关is（）的更多信息，请参阅docs。

Answer 2

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

应该是

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

Answer 3

因为我曾经遇到过这个问题而且在我的情况下它没有帮助我（我没有this，而是有一个jQuery选择器实例）。致电get()会获取HTML元素，您可以通过该元素获取上述nodeName。

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

或

$('.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

Answer 4

您也可以使用 $(this).prop('tagName');如果您使用的是jQuery 1.6或更高版本。

Answer 5

是。您可以使用以下代码：

this.tagName

Answer 6

我认为你不能在jQuery中使用nodeName，因为nodeName是一个DOM属性，而jQuery本身没有nodeName函数或属性。但根据最初提到这个nodeName内容的受访者，这就是我能够解决问题的方法：

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

注意：this这里是一个jQuery对象。

Answer 7

由于这是一个问题，你在google上使用 jquery tagname first child 作为查询，我将发布另一个例子：

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

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

jquery结果是（大写）标记名： P

Answer 8

考虑快速 FILTER 方法：

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

返回：

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

这样：

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

Answer 9

您可以在整个页面上获取html元素标记名称。

您可以使用：

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

Answer 10

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

请注意：用选择器（h1，h3或......）替换它

Answer 11

我只是为另一个问题写了它，并认为它也可以帮助你们。

用法：

即。 onclick="_DOM_Trackr(this);"

参数：

DOM-Object to trace
return / alert开关（可选，默认=警报）

<强>源代码：

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

Answer 12

解决问题的最佳方法是将$(this).attr("tag")替换为this.nodeName.toLowerCase()或this.tagName.toLowerCase()。

两者都产生完全相同的结果！

Answer 13

而只是做：

$(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()); 
  });
});

jQuery可以提供标签名称吗？

13 个答案: