如何确定 jQuery 中匹配元素的元素类型？

Posted 2023-05-08

【中文标题】如何确定 jQuery 中匹配元素的元素类型？

【英文标题】：How can I determine the element type of a matched element in jQuery?

【发布时间】：2010-09-25 09:48:18

【问题描述】：

我正在按 ID 名称匹配 ASP.Net 生成的元素，但我有一些元素可能会根据页面上下文呈现为文本框或标签。我需要弄清楚匹配是文本框还是标签，以便知道是通过 val() 还是通过 html() 获取内容。

$("[id$=" + endOfIdToMatch + "]").each(function () 
    //determine whether $(this) is a textbox or label
    //do stuff
);

我找到了一个不起作用的解决方案，它只是返回“未定义”：

$("[id$=" + endOfIdToMatch + "]").each(function () 
    alert($(this).tagName);
);

我错过了什么？

【参考方案1】：

一个jQuery太多了：

$("[id$=" + endOfIdToMatch + "]").each(function () 
    alert(this.tagName);
);

【讨论】：

噢噢噢噢。我现在明白了。好答案！

或$(this).get(0).tagName

@Znarkus：没错，但没有任何意义。 ;)

不，在这种情况下不是。但是如果你有一个带有 jQ​​uery 对象的变量，你就必须这样做:)

没有。如果你有一个 jQuery 对象，你会使用$(anything)[0]。

【参考方案2】：

考虑这个解决方案而不使用 each()：

var elements = $("[id$=" + endOfIdToMatch + "]");
var vals = elements.is("input").val();
var htmls = elements.is("label").html();
var contents = vals.concat(htmls);

Have a look at the documentation for is.

【参考方案3】：

你也可以这样使用：

if ($(this).is('input:checkbox'))

将“this”替换为您需要的任何实例，将“checkbox”替换为您需要的任何输入类型。

【参考方案4】：

我第一次回答了我自己的问题。经过更多的实验：

$("[id$=" + endOfIdToMatch + "]").each(function () 
   alert($(this).attr(tagName));
);

有效！

【讨论】：

还是一个 jQuery 太多了。 :-) 你已经有了带有 "this" 的 DOM 元素，不需要再次包装它！

【参考方案5】：

tagName 多么好的提示。我还建议使用 tagName.toLowerCase()，因为返回的值取决于文档类型（HTML 或 XML/XHTML）。

见：http://reference.sitepoint.com/javascript/Element/tagName

【参考方案6】：

在 jquery 1.6 中使用 prop()

示例

var el = $('body');

if (el.prop('tagName') === 'BODY') 
    console.log('found body')

【参考方案7】：

这是获取元素类型的最佳方式

function tgetelementType( elmentid )


    var TypeName = $('#' + elmentid).get(0).tagName;
    var TypeName2 = $('#' + elmentid).get(0).type;


    if($('#' + elmentid).get(0).tagName== "INPUT")
    
       return $('#' + elmentid).get(0).type.toUpperCase()
    
    else 
    
        return $('#' + elmentid).get(0).tagName.toUpperCase() ; 
    

【参考方案8】：

$("[id$=" + endOfIdToMatch + "]").each(function()
    var $this=jQuery(this),ri='';
    switch (this.tagName.toLowerCase())
        case 'label':
            ri=$this.html();
            break;
        case 'input':
            if($this.attr('type')==='text')ri=$this.val();
            break;
        default:
            break;
    
    return ri;
)

问题是，确定了标签名后，你打算做什么？您可以使用与 .end() 结合的附加选择器轻松过滤 jquery 列表来做同样的事情：

$("[id$=" + endOfIdToMatch + "]")
    .find("input:text")
    .each(function()
         /* do something with all input:text elements */
    )
    .end()
    .find("label")
    .each(function()
        /* do something with label elements */
    )
    .end()

如果你需要对这个特定的元素集合做更多的事情，这仍然可以被链接起来......就像上面的例子一样。

在任何一种情况下，您都必须在 each() 语句中处理这些值

【参考方案9】：

另一种可以说更优雅的解决方案是为每种元素类型编写两个单独的函数：

$("input#" + id).each(function()  alert(this + " is an input"); );
$("label#" + id).each(function()  alert(this + " is a label"); );