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

我通过 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);
});

我错过了什么？

67627 次浏览
小开

这是我第一次回答自己的问题，经过一些实验:

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

工作！

小开
最佳答案

只是有一个 jQuery 太多了:

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

说说你的建议吧。我还建议使用 tagName.toLowerCase () ，因为返回的值取决于文档类型(HTML 或 XML/XHTML)。

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

小开

考虑不使用 每个()的解决方案:

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

看一下 是的文档。

小开

你也可以使用这样的东西:

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

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

小开

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

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

在 jquery 1.6中使用 prop ()

例子

var el = $('body');


if (el.prop('tagName') === 'BODY') {
console.log('found body')
}
小开 
$("[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;
})

问题是，在确定了标记名之后，您打算做什么？您也可以使用一个附加的选择器来轻松过滤 jquery 列表。End ()做同样的事情:

$("[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()语句中对这些值进行某些操作

小开

还有一种解决方案，可以说更加优雅，就是为每种元素类型编写两个单独的函数:

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

提交答案