jQuery проверить, если существует и имеет значение
у меня есть следующий пример:
<input type="text" class="input1" value="bla"/>
есть ли способ проверить, существует ли этот элемент и имеет ли значение в одном операторе? Или, по крайней мере, что-нибудь короче
if($('.input1').length > 0 && $('input1').val() != '')
просто расстраиваюсь здесь с Милей-длинными условиями.
6 ответов:
вы могли бы сделать:
if($('.input1').length && $('.input1').val().length)
length
значениеfalse
в состоянии, когда значение0
.
вы можете сделать что-то вроде этого:
jQuery.fn.existsWithValue = function() { return this.length && this.val().length; } if ($(selector).existsWithValue()) { // Do something }
просто для этого, я отследил это в коде jQuery. Этот.функция val () в настоящее время начинается в строке 165 из атрибуты.js. Вот соответствующий раздел, с моими аннотациями:
val: function( value ) { var hooks, ret, isFunction, elem = this[0]; /// NO ARGUMENTS, BECAUSE NOT SETTING VALUE if ( !arguments.length ) { /// IF NOT DEFINED, THIS BLOCK IS NOT ENTERED. HENCE 'UNDEFINED' if ( elem ) { hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ]; if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) { return ret; } ret = elem.value; /// IF IS DEFINED, JQUERY WILL CHECK TYPE AND RETURN APPROPRIATE 'EMPTY' VALUE return typeof ret === "string" ? // handle most common string cases ret.replace(rreturn, "") : // handle cases where value is null/undef or number ret == null ? "" : ret; } return; }
Итак, вы либо получите
undefined
или""
илиnull
-- все из которых оцениваются как ложные в операторах if.
вы можете создать свой собственный пользовательский селектор
:hasValue
и затем используйте это для поиска, фильтрации или тестирования любых других элементов jQuery.jQuery.expr[':'].hasValue = function(el,index,match) { return el.value != ""; };
тогда вы можете найти такие элементы:
var data = $("form input:hasValue").serialize();
или проверить текущий элемент с
.is()
var elHasValue = $("#name").is(":hasValue");
jQuery.expr[':'].hasValue = function(el) { return el.value != ""; }; var data = $("form input:hasValue").serialize(); console.log(data) var elHasValue = $("[name='LastName']").is(":hasValue"); console.log(elHasValue)
label { display: block; margin-top:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label> First Name: <input type="text" name="FirstName" value="Frida" /> </label> <label> Last Name: <input type="text" name="LastName" /> </label> </form>
Более Дальнеишее Чтение: