jQuery - Itération d'éléments de champ avec maxlength - jquery

j'ai nombreuses forme des éléments sur une page avec un attribut de longueur maximale et souhaite avoir un compte à rebours de caractères pour alerter l'utilisateur des caractères restants. Je pensais que cela fonctionnerait, mais chaque comptoir est vide.

Voici un échantillon des éléments (tous les autres sont de structure similaire):

<label for="homeTagline">Tagline</label>
<input type="text" name="homeTagline" value="IT"S YOUR LIFE!" maxlength="24" class="maxed" />
<br>
<span class="emphasisTxt"><span class="cntr"></span> characters of 24 remaining</span>

et voici mon jquery

$(".maxed").each( function(){
var ml = parseInt( $(this).attr("maxlength") );
if( $(this).val().length() == 0){
$(this).sibling("span.cntr").html(ml);
} else {
$(this).sibling("span.cntr").html(ml - $(this).val().length() );
} // end if
});

Réponses:

2 pour la réponse № 1

Est-ce quelque chose comme ça que vous cherchez à accomplir?

$(".maxed").each(function(){
var ml     = parseInt( $(this).attr("maxlength") );
var length = $(this).val().length;

$(this).nextAll("span:first").find(".cntr").html(ml-length);
}).keyup(function() {
var ml     = parseInt( $(this).attr("maxlength") );
var length = $(this).val().length;

$(this).nextAll("span:first").find(".cntr").html(ml - length );
});

Voici un mis à jour Exemple jsFiddle: http://jsfiddle.net/RtHyX/4/

---

3 pour la réponse № 2

Je vois trois problèmes:

1. .length() sur $(this).val().length() est censé être .length. C'est une propriété de String, pas une méthode.

2. jQuery n'a pas .sibling méthode, c'est " .siblings, au pluriel.

3. span.cntr n'est pas un frère du domaine, c'est en fait un enfant d'un slibling. Vous avez donc besoin de quelque chose comme $(this).siblings(".emphasisTxt").find("span.cntr") pour le sélectionner.

Voir un version de travail sur jsfiddle.

De plus, souhaitez-vous que la plage soit mise à jour lorsque le champ est modifié (pas seulement au chargement de la page)? "" Vous devez configurer un écouteur de saisie pour cela. Veuillez clarifier.

---

2 pour la réponse № 3

Votre problème est le siblings()-Bit. (que vous avez mal orthographié, probablement).

siblings() sélectionne uniquement les éléments qui sont ... eh bien ... des frères et sœurs. Les frères et sœurs de votre champ de saisie sont vos label, <br> et <span class="emphasisTxt">. Comme span.cntr est à l'intérieur ce dernier, ce n'est plus un frère de this.

Au lieu, $(this).siblings("span.emphasisTxt").children("span.cntr") devrait faire la magie.

---

1 pour la réponse № 4

Voici la réponse à vos problèmes initiaux: http://jsfiddle.net/kPYqq/ Ce que vous cherchiez n'était pas un frère, c'était un enfant d'un frère. La longueur est une propriété d'une chaîne et non une fonction, donc supprimez les () ".

Je sais que cela ne répond pas directement à votre problème, mais cela pourrait être une alternative utile. J'ai déjà utilisé ce plugin jquery sur un site qui ressemble à ce que vous cherchez à faire: http://nooshu.com/jquery-plug-in-characters-left

---