【问题标题】:Get element type with jQuery使用 jQuery 获取元素类型
【发布时间】:2012-01-13 09:06:45
【问题描述】:

是否可以使用 jQuery 找出元素的类型?例如,元素是 div、span、select 还是 input?

例如,如果我尝试使用 jQuery 将值加载到下拉列表中,但相同的脚本可以将代码生成到一组单选按钮中,我是否可以创建类似的内容:

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

如果下拉列表旁边有一个带有 trigger 类的按钮,我的 elementType 变量应该在按下按钮后返回 select

【问题讨论】:

标签: jquery element


【解决方案1】:

通过jQuery方式获取元素类型:

var elementType = $(this).prev().prop('nodeName');

不用 jQuery 也一样

var elementType = this.previousSibling.nodeName;

检查特定元素类型:

var is_element_input = $(this).prev().is("input"); //true or false

【讨论】:

  • 请记住 .prop() 函数仅在 jQuery 1.6 中添加 - 您可能需要升级您正在使用的版本!
  • 这可以通过将 'tagName' 切换为 'nodeName' 来改进,如 here 所述。
  • @KyleStoflet - 看来你是对的,nodeName 确实支持更多类型的元素,支持 IE5.5 应该不再是问题,所以我认为更改 @ 没有问题987654326@ 到nodeName 在上面的答案中。两者都适用于元素,后者也适用于文本节点、属性等。
  • 有效,但我对 prev() 有点困惑,这是特定于相关示例代码的。基本上,$(this).is("input");
  • @Fanky - 没错,OP 专门要求 previous 元素,因此然后是 prev() 调用。其余答案适用于可能需要知道标签类型或检查标签名等的任何其他情况。
【解决方案2】:

你也可以使用:

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

【讨论】:

    【解决方案3】:

    您应该使用tagName 属性和attr('type') 作为输入

    【讨论】:

    • 举个例子会让这个评论更有说服力。
    【解决方案4】:

    正如 Distdev 所暗示的,您仍然需要区分输入类型。也就是说,

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

    会告诉你input,但这并不能区分复选框/文本/收音机。如果是输入,则可以使用

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

    告诉你复选框/文本/收音机,这样你就知道它是什么类型的控件了。

    【讨论】:

      【解决方案5】:

      你可以使用.is():

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

      source

      【讨论】:

        【解决方案6】:

        使用 get(0).tagName。 See this link

        【讨论】:

          【解决方案7】:

          使用节点名而不是标签名:

          nodeName 包含 tagName 的所有功能,以及更多功能。因此 nodeName 总是更好的选择。

          DOM Core

          【讨论】:

            猜你喜欢
            • 2012-03-18
            • 1970-01-01
            • 1970-01-01
            • 2010-11-16
            • 1970-01-01
            • 2016-03-18
            • 2017-04-09
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多