JQuery имеет проверку атрибутаAttr, чтобы увидеть, есть ли атрибут в элементе [duplicate]

585

Возможный дубликат:
Проверить наличие атрибута с помощью JQuery

Как вы проверяете, есть ли атрибут для элемента в jQuery? Подобно hasClass, но с attr?

Например,

if ($(this).hasAttr("name")) {
    // ...
}
  • 0
    Вот плагин jQuery, который, кажется, делает именно то, что вы ищете -> plugins.jquery.com/project/hasAttr
  • 3
    bmarti44 Похоже, что гнили некоторые ссылки.
Показать ещё 5 комментариев
Теги:

9 ответов

916
Лучший ответ
var attr = $(this).attr('name');

// For some browsers, `attr` is undefined; for others,
// `attr` is false.  Check for both.
if (typeof attr !== typeof undefined && attr !== false) {
    // ...
}
Поделиться
  • 0
    Ахах, спасибо Это правильный ответ для меня, потому что возвращение неопределенного не то, что я хочу. Еще раз спасибо.
  • 17
    Вероятно, было бы лучше сделать что-то вроде: if (typeof ($ (this) .attr ('name'))! = 'Undefined') {// ...}, поскольку undefined на самом деле можно переопределить с помощью простого: undefined = 1
Показать ещё 19 комментариев
525

Как насчет только $(this).is("[name]")?

Синтаксис [attr] - это селектор CSS для элемента с атрибутом attr, а .is() проверяет, соответствует ли вызываемый ему элемент указанному CSS-селектору.

Поделиться
  • 7
    и если вы хотите просто выбрать все элементы с атрибутом name, просто сделайте $('[name]')
  • 0
    Для тех, кто заинтересован в проверке классов в SVG DOM с использованием JQuery, это может быть альтернативой.
Показать ещё 7 комментариев
129

Если вы будете часто проверять наличие атрибутов, я бы предложил создать функцию 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>
Поделиться
  • 3
    @TreeUK - не опечатка! == это то, что я имел в виду.
  • 2
    Круто, я раньше такого не видел :) [! == не совсем равен (значение и тип)]
Показать ещё 4 комментария
68

Ты так близко сошел с ума.

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

Нет hasAttr, но при нажатии атрибута по имени будет возвращен undefined, если он не существует.

Вот почему работает ниже. Если вы удаляете атрибут name из #head, загорается второе предупреждение.

Обновление: В соответствии с комментариями ниже будет выполняться ТОЛЬКО, если атрибут присутствует И установлено что-то, а не если атрибут есть, но пустое

<script type="text/javascript">
$(document).ready(function()
{
    if ($("#heading").attr("name"))
      alert('Look, this is showing because it\ 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>
Поделиться
  • 1
    Поведение одинаково в обоих случаях. Вы можете поменять оценку false на undefined в примере, который я там показываю. .attr ("имя") не возвращает false, но оценивается как false. Таким образом, вы можете использовать его точно так же, как указано выше.
  • 17
    если присутствует имя attr, но пустая строка, атрибут будет существовать, но тест не пройден.
Показать ещё 5 комментариев
67

Поздно к вечеринке, но... почему не просто this.hasAttribute("name")?

Обратитесь Это

Поделиться
  • 0
    Хороший ответ, если вам не нужен объект jquery
  • 17
    или если вам все равно, что это не будет работать во многих старых браузерах и IE
Показать ещё 6 комментариев
13

Лучший способ сделать это будет с filter():

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

Было бы неплохо иметь .hasAttr(), но так как этого не существует, существует такой способ.

Поделиться
  • 1
    И вы можете отфильтровать его по значению, как $("nav>ul>li>a").filter("[data-page-id=123]");
  • 0
    как найти тег <img> с атрибутом src. Например: динамическая загрузка некоторых изображений. Как <img class = "img-circle img-thumbnail" src = "imagename.iix" alt = ""> <img class = "img-circle img-thumbnail" alt = ""> как найти этот второй и добавить какой-то класс к этому. Пожалуйста, помогите
Показать ещё 2 комментария
6 
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.

Поделиться
5

Я написал плагин hasAttr() для jquery, который будет делать все это очень просто, точно так, как запросил OP. Дополнительная информация здесь

EDIT: Мой плагин был удален в огромной ошибке с удалением базы данных plugins.jquery.com 2010 года. Вы можете посмотреть здесь для получения дополнительной информации о добавлении его самостоятельно и почему он не был добавлен.

Поделиться
  • 0
    Забавно, что эти ссылки не работают в IE 8, но работают в Chrome ...
5

Вы также можете использовать его с атрибутами, такими как 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 используется для хранения идентификатора целевого поля ввода.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню