jQuery檢查<input>是否存在並具有值

Question

我有以下示例：

<input type="text" class="input1" value="bla"/>

有沒有辦法檢查這個元素是否存在並且在一個語句中有值？ 或者，至少，任何更短的東西

if($('.input1').length > 0 && $('input1').val() != '')

這里只有一英里長的條件讓你感到沮喪。

Answer 1

如果輸入不存在，則輸入將沒有值。 試試這個...

if($('.input1').val())

Answer 2

你可以這樣做：

if($('.input1').length && $('.input1').val().length)

當值為0時， length在條件中的計算結果為false 。

Answer 3

你可以這樣做：

jQuery.fn.existsWithValue = function() { 
    return this.length && this.val().length; 
}

if ($(selector).existsWithValue()) {
        // Do something
}

Answer 4

只是為了它，我在jQuery代碼中跟蹤了這一點。 .val（）函數當前從attributes.js的第165行開始。 這是相關部分，帶有我的注釋：

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語句中評估為false。

Answer 5

您可以創建自己的自定義選擇器 :hasValue ，然后使用它來查找，過濾或測試任何其他jQuery元素。

jQuery.expr[':'].hasValue = function(el,index,match) {
  return el.value != "";
};

然后你可以找到這樣的元素：

var data = $("form input").serialize();

或者使用.is()測試當前元素

var elHasValue = $("#name").is("");

 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> 

進一步閱讀 ：

• 使jQuery :contains Case-Insensitive
• 制作自己的自定義jQuery選擇器
• 探索jQuery選擇器，第3部分

Answer 6

if($('#user_inp').length > 0 && $('#user_inp').val() != '')
{

    $('#user_inp').css({"font-size":"18px"});
    $('#user_line').css({"background-color":"#4cae4c","transition":"0.5s","height":"2px"});
    $('#username').css({"color":"#4cae4c","transition":"0.5s","font-size":"18px"});

}

Answer 7

我會做這樣的事情： $('input[value]').something 。 這會查找所有具有值的輸入並對其進行操作。