jQuery comprobar si existe y tiene un valor

4 minutos de lectura

avatar de usuario
Dimskiy

Tengo el siguiente ejemplo:

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

¿Hay alguna manera de verificar si este elemento existe y tiene un valor en una declaración? O, al menos, algo más corto que

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

Me estoy frustrando aquí con las condiciones de una milla de largo.

  • Tal vez haga una función auxiliar si usa el mismo tipo de condición muchas veces.

    – espejomx

    18 de marzo de 2013 a las 16:14

  • if($(selector).val()) debería funcionar. Si el elemento no existe, devolverá ‘indefinido’ y si existe pero no tiene longitud, devolverá “” (que se evalúa como falso).

    – Ben Jacobs

    18 de marzo de 2013 a las 16:15

  • @Benmj ¿’indefinido’ también se evaluaría como falso? Pensé que no lo haría.

    – Dimsky

    18 de marzo de 2013 a las 16:17

  • @isherwood Esto no es un duplicado. Quiero saber si el elemento existe Y tiene un valor al mismo tiempo.

    – Dimsky

    18 de marzo de 2013 a las 16:18

  • @Dimskiy: no debería if ($('#foobar').val()) { console.log('You will not see this') }

    – Ben Jacobs

    18 de marzo de 2013 a las 16:20

avatar de usuario
Brian

La entrada no tendrá un valor si no existe. Prueba esto…

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

  • Terminé escribiendo algunas funciones pequeñas, pero también se usó este ejemplo.

    – Dimsky

    18 de marzo de 2013 a las 18:09

  • @Christian: input1 no es una etiqueta html en la respuesta anterior, pero es una clase.

    – ismail baig

    22 de septiembre de 2014 a las 3:26


  • No acepto completamente confiar en el atributo de valor del elemento de entrada. A veces puede estar vacío (sin valor dentro de él), pero aún así estar presente en el alcance. Entonces, lo mejor es confiar en $(‘.input1’).length > 0 y luego hacer cualquier procesamiento.

    – Destructor de código

    4 de diciembre de 2015 a las 15:21


  • La cadena vacía se evalúa como falsa. Pruébalo en la consola if("") { true } else { false } Así que esta es la respuesta correcta.

    – Seth Jeffrey

    18 de febrero de 2016 a las 10:44

Podrías hacerlo:

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

length evalúa a false en una condición, cuando el valor es 0.

  • @MarkWalters: No hay un voto negativo aquí, pero no es una gran mejora con respecto al original.

    – el sistema

    18 de marzo de 2013 a las 16:17

  • Te votaré Curt. La adición de .length es mi preferencia aquí.

    – Robert Waddell

    14/09/2013 a las 19:48

  • @thesystem esta respuesta es una gran mejora en comparación con el original. El original confía en val(), que se evaluará como falso en cadenas vacías, mientras que esto no lo hace. Aparte de eso, al intentar la respuesta aceptada, falló para mí, pero Curt su respuesta lo hizo.

    – Me esfuerzo mucho pero lloro más fuerte

    12 de diciembre de 2020 a las 23:07

avatar de usuario
97ldave

Puedes hacer algo como esto:

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

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

avatar de usuario
KyleMit

Puedes crear el tuyo propio selector personalizado :hasValue y luego utilícelo para buscar, filtrar o probar cualquier otro elemento de jQuery.

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

Entonces puedes encontrar elementos como este:

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

O pruebe el elemento actual con .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>

Otras lecturas:

avatar de usuario
Mirza Arsal Chaudhry

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

}

avatar de usuario
BWP

Yo haría algo como esto: $('input[value]').something . Esto encuentra todas las entradas que tienen valor y opera algo sobre ellas.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad