Comment simplifier ma condition if en jQuery ?

Question

Je cherche un moyen de faire ce qui suit :

$("#a" || "#b").val() === ""

par opposition à :

$("#a").val() === "" || $("#b").val() === ""

Des idées ?

Merci d'avance !

Answer 1

Pour deux éléments, je pense que votre exemple est à peu près aussi court que possible et que son sens est clair. Toutefois, si vous souhaitez répéter cette logique ou évaluer un plus grand nombre d'éléments, vous pouvez l'améliorer en créant une fonction simple qui évalue si les éléments d'un ensemble répondent à une condition.

Extension de jQuery

$.fn.any = function (evaluator) {
    var items = $(this);
    for (var i = 0; i < items.length; i++) {
        if (evaluator(items[i]) === true) {
            return true;
        }
    }

    return false;
};

Démonstration : http://jsfiddle.net/xE76y/1/

Ceci est similaire à la Any() mise en œuvre dans le module .Net LINQ (et je suis sûr qu'elle est implémentée dans d'autres bibliothèques, notamment celles orientées vers la programmation fonctionnelle). En c#, vous appelleriez une telle méthode :

enumerable.Any( o => o.Value == "" );

La syntaxe de JavaScript n'est (malheureusement) pas aussi concise ; vous vous retrouvez avec quelque chose comme :

array.any( function(o){ return o.value === ""; } );

Jusqu'à présent, cela ne vous a rien apporté. Cependant, si vous voulez itérer sur un grand nombre d'éléments, cela devient beaucoup plus élégant.

// there could be zero inputs or 100 inputs; it doesn't matter
var result = $("input").any(function (o) {
    return o.value === "";
});

Solution native

Notez que nous ne nous appuyons pas sur jQuery dans nos any() méthode. Vous pouvez également envisager une solution JavaScript native telle que le site Array.some() méthode .

some() exécute la fonction callback une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un où la fonction callback renvoie une valeur vraie. Si un tel élément est trouvé, some renvoie immédiatement true.

Démonstration : http://jsfiddle.net/xE76y/2/

var result = jQuery.makeArray($("input")).some(function (o) {
    return o.value === "";
});

Comme il s'agit d'une méthode de tableau, elle ne fonctionne que sur un tableau. Cela signifie malheureusement que document.getElementsByTagName("input").some(...) sera no travail depuis getElementsByTagName() renvoie un NodeList .

Bien sûr, vous pourriez mettre ce que vous voulez dans un tableau et appeler some() sur ce tableau. L'appel à jQuery.makeArray() dans l'exemple est juste pour la commodité.

Abstraction des fonctions d'évaluation

Démonstration : http://jsfiddle.net/xE76y/3/

Les fonctions d'évaluation (comme le test de la chaîne vide) seront peut-être réutilisées. Elles peuvent être abstraites davantage.

// ideally, this should NOT be left in global scope
function isEmpty(input) {
    return input.value === "";
}

// the check now fits nicely in one line.
if ($("input").any(isEmpty)) {
    alert("At least one input is empty.");
}

Les appels de méthode qui en résultent sont assez propres : $("#a, #b").any(isEmpty) et $("input").any(isEmpty)

---

_{* Il faut aussi noter que LINQ a été <a href="http://linqjs.codeplex.com/" rel="nofollow">recréé pour JavaScript </a>.}

Answer 2

Essayez plutôt comme ça :

 if ($('#a,#b').is(':empty'))
    {
      alert("Either a or b is Empty!");
     }

Essayez mon Démo

Edit :

S'il s'agit d'un type d'entrée tel qu'une zone de texte, il sera un peu plus volumineux mais produira le même effet :

if ($.inArray("",[ $("#a").val(), $("#b").val() ])>=0)
{
    alert("Either a or b is Empty!");   
}

Voir autre Démo

Answer 3

Si vous voulez éviter la duplication de la chaîne vide "" vous pourriez faire ça :

if ($.inArray([ $("#a").val(), $("#b").val() ], ""))

Ou si vous voulez sélectionner une seule fois avec jQuery :

if ($.inArray($("#a, #b").map(function() { return this.value; }), ""))

Mais je n'en utiliserais aucun moi-même. Elles sont sans doute toutes deux moins efficaces, plus artificielles et certainement moins lisibles que la méthode "facile" !

Answer 4

Je ne suis pas un expert en javaScript mais avez-vous vérifié auprès de :

http://api.jquery.com/multiple-selector/

Expressions régulières des sélecteurs jQuery

On peut aussi utiliser la fonction .each comme dans le cas suivant

Sélecteurs d'ID multiples jQuery