jQuery prüft, ob <Eingabe> vorhanden ist und einen Wert hat

70

Ich habe folgendes Beispiel:

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

Gibt es eine Möglichkeit zu überprüfen, ob dieses Element vorhanden ist und einen Wert in einer Anweisung hat? Oder zumindest etwas kürzeres

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

Ich bin hier nur frustriert von kilometerlangen Bedingungen.

Dimskiy
quelle
Vielleicht machen Sie eine Hilfsfunktion, wenn Sie die gleiche Bedingung oft verwenden.
Mirrormx
1
if ($ (Selektor) .val ()) sollte funktionieren. Wenn das Element nicht existiert, gibt es 'undefined' zurück und wenn es existiert, aber keine Länge hat, gibt es "" zurück (was als false ausgewertet wird).
Ben Jacobs
@Benmj würde 'undefined' auch als false auswerten? Ich dachte es würde nicht.
Dimskiy
@isherwood Dies ist kein Duplikat. Ich möchte wissen, ob das Element existiert UND gleichzeitig einen Wert hat.
Dimskiy
1
@ Dimkiy: sollte es nichtif ($('#foobar').val()) { console.log('You will not see this') }
Ben Jacobs

Antworten:

144

Die Eingabe hat keinen Wert, wenn sie nicht vorhanden ist. Versuche dies...

if($('.input1').val())
Brian
quelle
Am Ende habe ich ein paar kleine Funktionen geschrieben, aber auch dieses Beispiel wurde verwendet.
Dimskiy
3
@Christian: input1 ist in der obigen Antwort kein HTML-Tag, sondern eine Klasse.
ismail baig
5
Ich bin nicht vollständig damit einverstanden, dem Wertattribut des Eingabeelements zu vertrauen. Es kann manchmal leer sein (kein Wert darin), aber dennoch im Bereich vorhanden sein. Das Beste ist also, sich auf $ ('. Input1'). Length> 0 zu verlassen und dann die Verarbeitung durchzuführen.
Code Buster
2
Leere Zeichenfolge wird als falsch ausgewertet. Probieren Sie es in der Konsole aus. if("") { true } else { false }Dies ist also die richtige Antwort.
Seth Jeffery
27

Du könntest es tun:

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

lengthwird falsein einer Bedingung ausgewertet , wenn der Wert ist 0.

Curt
quelle
@ MarkWalters: Hier gibt es keine Abwertung, aber es ist keine große Verbesserung gegenüber dem Original.
das System
Ich werde dich abstimmen, Curt. Das Hinzufügen von .length ist hier meine Präferenz.
Robert Waddell
@thesystem Diese Antwort ist eine große Verbesserung gegenüber dem Original. Das Original vertraut auf val (), das bei leeren Zeichenfolgen als false ausgewertet wird, während dies nicht der Fall ist. Abgesehen davon, als ich die akzeptierte Antwort versuchte, schlug es für mich fehl, aber Curt, seine Antwort, tat es.
Ich versuche es so sehr, aber ich weine stärker
13

Sie können so etwas tun:

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

if ($(selector).existsWithValue()) {
        // Do something
}
97ldave
quelle
9

Nur zum Teufel habe ich das im jQuery-Code aufgespürt. Die Funktion .val () beginnt derzeit in Zeile 165 von attribute.js . Hier ist der relevante Abschnitt mit meinen Anmerkungen:

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;
    }

Sie erhalten also entweder undefinedoder ""oder null- alle werden in if-Anweisungen als falsch bewertet.

Ben Jacobs
quelle
3

Sie können Ihren eigenen benutzerdefinierten Selektor erstellen :hasValueund diesen dann zum Suchen, Filtern oder Testen anderer jQuery-Elemente verwenden.

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

Dann finden Sie folgende Elemente:

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

Oder testen Sie das aktuelle Element mit .is()

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

Weiterführende Literatur :

KyleMit
quelle
0
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"});

}
Mirza Arsal Chaudhry
quelle
-1

Ich würde so etwas machen : $('input[value]').something. Dies findet alle Eingänge, die Wert haben und bearbeitet etwas auf sie.

BWP
quelle