jQuery的hasAttr用于检查元素是否具有属性。

Question

如何使用 jQuery 检查元素上是否存在属性？类似于 hasClass，但是使用的是 attr？

例如：

if ($(this).hasAttr("name")) {
    // ...
}

- Mark

---

快速翻译： 如果 $(this) 元素具有 ATTRIBUTE_NAME 属性，则执行 /* ... */ 代码。补充说明： 这并非是与另一个问题重复的内容，而是针对不同问题的相似问题。链接的重复问题现在称为“按属性选择元素”。 - jave.web

jQuery没有.hasAttr()函数，但很容易实现: jQuery.prototype.hasAttr = function(attribute) { var a = $(this).attr(attribute); return ((typeof a !== "undefined") && (a !== false)); }; - Spider IT

Answer 1

var attr = $(this).attr('name');

// For some browsers, `attr` is undefined; for others,
// `attr` is false.  Check for both.
if (typeof attr !== 'undefined' && attr !== false) {
    // ...
}

- strager

---

最好这样做：如果（typeof（$（this）.attr（'name'））！= 'undefined'）{ // ... }因为 undefined 可以通过简单的 undefined = 1 重新定义。 - Shane Tomlinson

@FuzzyDunlop，是的，但是如果“attr”为空串，它也会返回false。它应该是true，因为空属性是有效属性。另外，不需要使用双重否定，因为if语句会将其转换为布尔值。 - strager

我认为我们应该使用“||”而不是“&&”。 - Pyjcoder

@Pyjcoder 在这种情况下使用&&是正确的。如果属性既不是undefined又不是false，则应继续执行if语句。如果任何一个条件为false，它都应该跳过if。在你反转代码的情况下（可能是为了返回或错误处理），你需要使用||，因为你只想捕获任意一个条件匹配的情况。 - Roe

Answer 2

只使用 $(this).is("[name]") 怎么样？

[attr] 语法是选择带有属性 attr 的元素的 CSS 选择器，.is() 检查它被调用的元素是否与指定的 CSS 选择器匹配。

- Domenic

---

这种方法和.attr的速度比较如何？ - Eugen Konkov

Answer 3

如果您经常需要检查属性是否存在，我建议创建一个hasAttr函数，以便按照您在问题中假设的方式使用：

$.fn.hasAttr = function(name) {  
   return this.attr(name) !== undefined;
};

$(document).ready(function() {
    if($('.edit').hasAttr('id')) {
        alert('true');
    } else {
        alert('false');
    }
});

<div class="edit" id="div_1">Test field</div>

- karim79

Answer 4

你离成功这么近了，简直不敢相信。

if($(this).attr("name"))

没有hasAttr方法，但是通过属性名称访问属性，如果它不存在，就会返回undefined。

这就是为什么下面的代码可以工作。如果你从#heading中删除name属性，第二个警报将被触发。

更新: 根据评论，下面的代码只有当属性存在并且设置了某些内容时才能工作，并且属性存在但为空时不起作用。

<script type="text/javascript">
$(document).ready(function()
{
    if ($("#heading").attr("name"))
      alert('Look, this is showing because it\'s not undefined');
    else
      alert('This would be called if it were undefined or is there but empty');
});
</script>
<h1 id="heading" name="bob">Welcome!</h1>

- Tristan Warner-Smith

---

如果属性名存在但为空字符串，该属性将存在但测试将失败。 - lambacck

Answer 5

虽然来晚了，但...为什么不直接用this.hasAttribute("name")呢？

参见这里

- Domenic

---

或者，如果您不在意它无法在许多旧版浏览器和IE中运行。 - Aaron Luman

顺便说一下，这些天使用hasAttribute是完全安全的 https://caniuse.com/mdn-api_element_hasattribute - undefined

Answer 6

最好的方法是使用filter()函数：

$("nav>ul>li>a").filter("[data-page-id]");

虽然没有.hasAttr()方法，但是这种方式仍然很好用。

- JamesM-SiteGen

Answer 7

Object.prototype.hasAttr = function(attr) {
    if(this.attr) {
        var _attr = this.attr(attr);
    } else {
        var _attr = this.getAttribute(attr);
    }
    return (typeof _attr !== "undefined" && _attr !== false && _attr !== null);      
};

当我在编写自己的函数时，偶然发现了这个...我想分享一下，以防其他人也会遇到同样的问题。 我添加了null，因为如果属性不存在，getAttribute()将返回null。

此方法允许您检查jQuery对象和常规JavaScript对象。

- rlemon

Answer 8

你可以在表单字段等属性上使用如 disabled="disabled" 等的属性来使用它，示例如下：

$("#change_password").click(function() {
    var target = $(this).attr("rel");
    if($("#" + target).attr("disabled")) {
        $("#" + target).attr("disabled", false);
    } else {
        $("#" + target).attr("disabled", true);
    }
});

"rel"属性存储目标输入字段的id。

- user398341

Answer 9

我为jQuery编写了一个hasAttr()插件，可以很简单地完成所有操作，正如OP所请求的那样。更多信息请点击此处here 编辑：我的插件在大规模的plugins.jquery.com数据库删除灾难中被删除。你可以在here查找一些关于如何添加它以及为什么没有被添加的信息。

- bmarti44

---

有趣的是，这些链接在IE 8中不起作用，但在Chrome中可以... - vapcguy