jQuery: Nhận tên thẻ phần tử được chọn

641

Có một cách dễ dàng để có được một tên thẻ?

Ví dụ, nếu tôi được đưa $('a')vào một hàm, tôi muốn lấy 'a'.

javascript jquery jquery-selectors

— cấu hình
nguồn

2

Có thể trùng lặp với jQuery có chức năng nào để xác định loại thẻ của (các) phần tử DOM được tham chiếu bởi đối tượng jQuery không?

— Darko Z

1032

Bạn có thể gọi .prop("tagName"). Ví dụ:

jQuery("<a>").prop("tagName"); //==> "A"
jQuery("<h1>").prop("tagName"); //==> "H1"
jQuery("<coolTagName999>").prop("tagName"); //==> "COOLTAGNAME999"

Nếu viết ra .prop("tagName")là tẻ nhạt, bạn có thể tạo một chức năng tùy chỉnh như vậy:

jQuery.fn.tagName = function() {
  return this.prop("tagName");
};

Ví dụ:

jQuery("<a>").tagName(); //==> "A"
jQuery("<h1>").tagName(); //==> "H1"
jQuery("<coolTagName999>").tagName(); //==> "COOLTAGNAME999"

Lưu ý rằng tên thẻ, theo quy ước, được trả lại VỐN . Nếu bạn muốn tên thẻ được trả về là tất cả chữ thường, bạn có thể chỉnh sửa chức năng tùy chỉnh như vậy:

jQuery.fn.tagNameLowerCase = function() {
  return this.prop("tagName").toLowerCase();
};

Ví dụ:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"

— Untileryj
nguồn

18

NHƯ jQuery 1.6, điều này nên được .prop.

— Rocket Hazmat

3

Là quy ước viết hoa theo sau bởi tất cả các trình duyệt? Nếu không, jQuery có bình thường hóa điều này không?

— callum

8

tagName là một phần của đặc tả DOM và luôn được viết hoa.

— Untileryj

Lưu ý rằng chuỗi được trả về nằm trong BÀI VIẾT VỐN. Đây sẽ là một hình ảnh xác thực nếu bạn đang cố so sánh nó với "div" hoặc "a" chẳng hạn.

— Hartley Brody

3

sử dụng toLowerCase()hoặc toUpperCase()có thể hữu ích khi so sánh prop('tagName')kết quả với tên thẻ. if($("my_selector").prop("tagName").toLowerCase() == 'div')hoặcif($("my_selector").prop("tagName").toUpperCase() == 'DIV')

— S.Thiongane

99

Bạn có thể sử dụng của DOM nodeNamebất động sản :

$(...)[0].nodeName

— SLaks
nguồn

Cảm ơn. Hoạt động rất tốt - mặc dù tôi sẽ sử dụng phiên bản jQueryish hơn vì hiện tại tôi đang ở trong thế giới jQuery.

— cấu hình

6

Các giải pháp JS thuần túy (như giải pháp này) thường vượt trội so với các giải pháp jQuery đặc biệt là nếu chúng không gặp phải vấn đề tương thích trình duyệt hoặc dài dòng hơn nhiều.

— Steven Lu

25

... Và đặc biệt là do các vấn đề không tương thích của trình duyệt đó, các vấn đề của jQuery thường vượt trội hơn nếu ai đó chọn giải pháp và không thành thạo về những gì không tương thích với trình duyệt. ;)

— Scott Stafford

4

Tôi xem xét tính ưu việt này vì không quan trọng phiên bản jQuery là gì, giải pháp này hoạt động trên tất cả các phiên bản. +1

— Stijn de Witt

7

đặc biệt nếu bạn đang ở trong một tình huống giống như (), trong đó bạn phải đưa phần tử trở lại một đối tượng jquery để có được một thuộc tính đã có ở đó, như thế nào $(this).prop('tagname'). this .nodeName thường hiệu quả hơn. +1

— phổ biến

62

Kể từ jQuery 1.6, bây giờ bạn nên gọi prop:

$target.prop("tagName")

Xem http://api.jquery.com/prop/

— Cướp
nguồn

46

jQuery 1.6+

jQuery('selector').prop("tagName").toLowerCase()

Các phiên bản cũ hơn

jQuery('selector').attr("tagName").toLowerCase()

toLowerCase () không bắt buộc.

— Dayron Gallardo
nguồn

Tại sao bạn làm new Stringvậy

— Rocket Hazmat

Bởi vì toLowerCase () là một phương thức của Chuỗi

— Dayron Gallardo

23

Đây là một cách khác:

$('selector')[0].tagName

— Chepech
nguồn

Đẹp quá Rõ ràng hơn nodeName và thậm chí ngắn hơn. : P

— Dennis98

11

Bạn KHÔNG nên sử dụng jQuery('selector').attr("tagName").toLowerCase(), vì nó chỉ hoạt động trong các phiên bản cũ hơn của Jquery.

Bạn có thể sử dụng $('selector').prop("tagName").toLowerCase()nếu bạn chắc chắn rằng bạn đang sử dụng phiên bản jQuery thats> = phiên bản 1.6.

Ghi chú :

Bạn có thể nghĩ rằng MỌI NGƯỜI đang sử dụng jQuery 1.10+ hoặc một cái gì đó vào lúc này (tháng 1 năm 2016), nhưng thật không may, điều đó thực sự không đúng. Ví dụ, nhiều người ngày nay vẫn đang sử dụng Drupal 7 và mọi bản phát hành chính thức của Drupal 7 cho đến ngày nay đều bao gồm jQuery 1.4.4 theo mặc định.

Vì vậy, nếu không biết chắc chắn dự án của bạn sẽ sử dụng jQuery 1.6+ hay không, hãy xem xét sử dụng một trong các tùy chọn hoạt động cho TẤT CẢ các phiên bản jQuery:

Lựa chọn 1 :

jQuery('selector')[0].tagName.toLowerCase()

Lựa chọn 2

jQuery('selector')[0].nodeName.toLowerCase()

— John Slegers
nguồn

0

nodeName sẽ cung cấp cho bạn tên thẻ bằng chữ hoa, trong khi localName sẽ cung cấp cho bạn chữ thường.

$("yourelement")[0].localName

sẽ cung cấp cho bạn: yourelement thay vì YOUELMENT

— Donovan P
nguồn