JQuery 1.9.1 переключатель свойств

Фон

Как и в jQuery 1.9, метод .attr(..) больше не возвращает значения свойств, вместо этого мы теперь должны использовать .prop(..). К сожалению, это также относится к атрибутам, указанным с помощью селектора атрибутов i.e. $("input[value=]")

См http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

и хорошее обсуждение SO о различиях между .attr и .prop:

.prop() vs .attr()

Моя ситуация

В настоящее время я использую селектора типа $("input[value=]") и $("select[value=]") для выбора входных элементов, которые не имеют значения. Однако это больше не работает с jQuery 1.9, вместо этого я теперь делаю что-то вроде этого:

var hasValue = function () { return !!($(this).val().length); };
var hasNoValue = function () { return !($(this).val().length); };
$("input").filter(hasValue);
$("select").filter(hasValue);

Мои фактические селекторы немного больше, проверяя несколько элементов с или без значений, поэтому теперь мне нужно разделить 1 селекторную строку на несколько селекторов с помощью метода .filter(..) между вызовами.

Вопрос

Есть ли эквивалент $("[value=]"), $("[value!=]"), $("[value='abc']"), который использует свойство вместо атрибута? А если нет, есть ли более чистый способ, чем использование методов .filter(hasValue) и .filter(hasNoValue)?

Спасибо

Ответы

Ответ 1

Использование .filter кажется единственным способом, но это не так уж плохо, и вы можете сделать его немного точнее, используя .val:

$(":input").filter(function () { return $(this).val() === ""; });

Если это действительно предосудительно для вас, вы можете создать настраиваемый селектор.

$.expr[':'].emptyInput = function (elem) {
    return $(elem).is(":input") && $(elem).val() === "";
};

http://jsfiddle.net/ExplosionPIlls/zaZPp/

EDIT: вы также можете уйти с помощью this.value вместо $(elem).val().

Ответ 2

В соответствии с руководство по обновлению:

Однако, когда используется селектор типа "input [value = abc]", он всегда должен выбирать атрибут value, а не изменения, внесенные в свойство пользователем, например, из них вводя текст в текстовый ввод. Начиная с jQuery 1.9, это ведет себя корректно и последовательно. Раньше версии jQuery иногда использовали свойство, когда они должны были использовать атрибут.

Итак, это отвечает на ваш первый вопрос - нет прямого эквивалента, нужно использовать атрибут вместо свойства.

Ваш код кажется прекрасным, но если вы хотите быть более стандартизированным и повторно используемым, вы можете создать дополнительный фильтр. Например:

(function($) {
    $.expr[':'].hasValue = function(element) {
        var $element = $(element);
        return element.is(':input') && element.val();
    };
}(window.jQuery));

Это позволит вам выбрать такие вещи:

// Select input elements with value and select elements without value.
$('input:hasValue,select:not(:hasValue)');

И другие различные комбинации, которые вам нужны.

Ответ 3

Я наткнулся на это и просто хотел опубликовать другое решение, которое я нашел, что работает в некоторых ситуациях, когда некоторые из других предлагаемых решений не подходят.

Просто добавьте этот обработчик событий в свой код

    $('input').on('keyup', function(){  
        var value = $(this).val();
        $(this).attr('value', value);
    });