element name - 用jQuery獲取元素類型




selector create (7)

是否有可能使用jQuery來查找帶有jQuery元素的類型? 例如,元素是div,span,select還是input?

例如,如果我試圖使用jQuery將值加載到下拉列表中,但是相同的腳本可以將代碼生成為一組單選按鈕,我可以創建如下所示的代碼:

$('.trigger').live('click', function () {
   var elementType = $(this).prev().attr(WHAT IS IT);
});

給定一個帶有觸發器類旁邊按鈕的下拉列表,我的elementType變量應該在按下按鈕時返回select


Answers

正如Distdev暗示的那樣,您仍然需要區分輸入類型。 也就是說,

$(this).prev().prop('tagName');

會告訴你input ,但這並不區分複選框/文本/廣播。 如果是輸入,則可以使用

$('#elementId').attr('type');

告訴你複選框/文本/電台,所以你知道它是什麼樣的控制。


你應該使用tagName屬性和attr('type')作為輸入


你也可以使用:

$("#elementId").get(0).tagName


你可以使用.is()

  $( "ul" ).click(function( event ) {
      var target = $( event.target );
      if ( target.is( "li" ) ) {
         target.css( "background-color", "red" );
      }
  });

看到source


通過tagName使用節點名稱:

nodeName包含tagName的所有功能,再加上幾個。 因此nodeName總是最好的選擇。

請參閱DOM Core


之前所有答案都需要.length參數的原因是它們主要使用jquery的$()選擇器,它在幕後有querySelectorAll(或者它們直接使用它)。 這個方法相當慢,因為它需要解析整個DOM樹,尋找與該選擇器的所有匹配並用它們填充數組。

['length']參數不是必需的或有用的,如果你直接使用document.querySelector(selector) ,代碼將會快得多,因為它返回它匹配的第一個元素,如果沒有找到則返回null。

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

但是這個方法讓我們返回實際的對象; 如果它不會被保存為變量並重複使用,那麼這是很好的(因此如果我們忘記就保持參考)。

var myel=elementIfExists("#myid");
// now we are using a reference to the element which will linger after removal
myel.getParentNode.removeChild(myel);
console.log(elementIfExists("#myid")); /* null */
console.log(myel); /* giant table lingering around detached from document */
myel=null; /* now it can be garbage collected */

在某些情況下,這可能是期望的。 它可以在for循環中使用,如下所示:

/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;

如果你實際上並不需要這個元素並想要獲得/存儲只是一個真/假,那就加倍吧! 它適用於解開的鞋子,為什麼要在這裡打結?

function elementExists(selector){
    return !!document.querySelector(selector);
}
/* usage: */
var hastables = elementExists("table");  /* will be true or false */
if (hastables){
    /* insert css style sheet for our pretty tables */
}
setTimeOut(function (){if (hastables && !elementExists("#mytablecss"))
                           alert("bad table layouts");},3000);




jquery element