jQuery prüfen, ob existiert und hat einen Wert

Lesezeit: 4 Minuten

Benutzer-Avatar
Dimsky

Ich habe folgendes Beispiel:

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

Gibt es eine Möglichkeit zu überprüfen, ob dieses Element existiert und einen Wert in einer Anweisung hat? Oder zumindest alles, was kürzer ist

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

Ich werde hier nur frustriert mit kilometerlangen Bedingungen.

  • Machen Sie vielleicht eine Hilfsfunktion, wenn Sie die gleiche Art von Bedingung oft verwenden.

    – Spiegelmx

    18. März 2013 um 16:14 Uhr

  • if($(selector).val()) sollte funktionieren. Wenn das Element nicht existiert, gibt es ‘undefiniert’ zurück, und wenn es existiert, aber keine Länge hat, gibt es “” zurück (was als falsch ausgewertet wird).

    – Ben Jacobs

    18. März 2013 um 16:15 Uhr

  • @Benmj würde ‘undefined’ auch als false auswerten? Ich dachte, es würde nicht.

    – Dimsky

    18. März 2013 um 16:17 Uhr

  • @isherwood Dies ist kein Duplikat. Ich möchte wissen, ob das Element existiert UND gleichzeitig einen Wert hat.

    – Dimsky

    18. März 2013 um 16:18 Uhr

  • @Dimskiy: sollte es nicht if ($('#foobar').val()) { console.log('You will not see this') }

    – Ben Jacobs

    18. März 2013 um 16:20 Uhr

Benutzer-Avatar
Brian

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

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

  • Am Ende habe ich ein paar kleine Funktionen geschrieben, aber dieses Beispiel wurde auch verwendet.

    – Dimsky

    18. März 2013 um 18:09 Uhr

  • @Christian: input1 ist in der obigen Antwort kein HTML-Tag, sondern eine Klasse.

    – ismail baig

    22. September 2014 um 3:26 Uhr


  • Ich stimme nicht vollständig zu, auf das Wertattribut des Eingabeelements zu vertrauen. Es kann manchmal leer sein (kein Wert darin), aber dennoch im Gültigkeitsbereich vorhanden sein. Am besten verlassen Sie sich also auf $(‘.input1’).length > 0 und führen dann die Verarbeitung durch.

    – Codeknacker

    4. Dezember 2015 um 15:21 Uhr


  • Eine leere Zeichenfolge wird als falsch ausgewertet. Probieren Sie es in der Konsole aus if("") { true } else { false } Das ist also die richtige Antwort.

    – Seth Jeffery

    18. Februar 2016 um 10:44 Uhr

Du könntest es tun:

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

length wertet zu false in einem Zustand, wenn der Wert ist 0.

  • @MarkWalters: Hier gibt es keine Ablehnung, aber es ist keine große Verbesserung gegenüber dem Original.

    – das System

    18. März 2013 um 16:17 Uhr

  • Ich gebe dir ein Upvote, Curt. Die Hinzufügung von .length ist hier meine Präferenz.

    – Robert Waddell

    14. September 2013 um 19:48 Uhr

  • @thesystem diese Antwort ist eine große Verbesserung im Vergleich zum Original. Das Original vertraut auf val(), das bei leeren Zeichenfolgen als falsch ausgewertet wird, während dies nicht der Fall ist. Abgesehen davon schlug es für mich fehl, als ich die akzeptierte Antwort versuchte, aber Curt, seine Antwort, tat es.

    – Ich bemühe mich so sehr, aber ich weine stärker

    12. Dezember 2020 um 23:07 Uhr

Benutzer-Avatar
97ldave

Sie können so etwas tun:

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

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

Benutzer-Avatar
Ben Jacobs

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

Also, Sie werden entweder bekommen undefined oder "" oder null — die alle in if-Anweisungen als falsch ausgewertet werden.

Benutzer-Avatar
KyleMit

Sie können Ihre eigenen erstellen benutzerdefinierter Selektor :hasValue und verwenden Sie diese dann, um andere jQuery-Elemente zu finden, zu filtern oder zu testen.

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

Dann können Sie Elemente wie diese finden:

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

Oder testen Sie das aktuelle Element mit .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>

Weiterführende Lektüre:

Benutzer-Avatar
zmag

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

}

Benutzer-Avatar
BWP

Ich würde so etwas tun: $('input[value]').something . Dies findet alle Eingaben, die einen Wert haben, und bearbeitet etwas mit ihnen.

1016190cookie-checkjQuery prüfen, ob existiert und hat einen Wert

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy