Aktualisieren eines Zeichen Grenzzählwerts auf meinem TextArea-

Question

Also ich meine TextArea- hier erstellt haben:

textarea { 
    min-width: 120px; 
    min-height: 90px; 
    padding: 8px 10px; 
    background: #FFF; 
    border: 1px solid #E0E0E0; 
    border-radius: 2px; 
    outline: none; 
    padding: 8px 10px; 
    box-shadow: inset 0 1px 2px rgba(#E0E0E0, .50), 0 -1px 1px #FFF, 0 1px 0 #FFF; 

    @include transition(all .2s ease-in-out); 

    @include placeholder { 
     font-family: 'Titillium Web', sans-serif; 
    } 
} 
textarea:focus { 
    border: 1px solid lighten(#3498db, 10); 

    @include box-shadow(0px, 0px, 6px, rgba(lighten(#3498db, 10), .5), false); 
} 
.textarea-group { 
    position: absolute; 
    min-width: 120px; 
    min-height: 90px; 

    textarea[limit] { 
     display: block; 
     resize: none; 
     border-bottom: none; 
     border-bottom-left-radius: 0; border-bottom-right-radius: 0; 
     margin: 0; 
     position: relative; 
     width: 100%; 
    } 
    .chars { 
     display: block; 
     margin: 0; 
     position: relative; 
     width: 100%; 
     padding: 8px 10px; 
     background: #FAFAFA; 
     color: #999; 
     font-size: 11px; 
     border: 1px solid #E0E0E0; 
     border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; 
    } 
} 

Und ich habe ein Skript geschrieben, um Änderungen in meinem Code zu erkennen, jedoch ist es nicht meine Zähler zu aktualisieren. Kann mir jemand sagen warum? Ich denke, es könnte an der Auswahl der Elemente liegen.

$(function() { 
    $('.textarea-group > textarea[limit]').keyup(function() { 
     var max = $(this).attr('limit'); 
     var length = $(this).val().length; 
     length = max - length; 
     $(this + ' > .chars span').text(length); 
    }); 
}); 

Das Skript wird definitiv aufgerufen.

N.B. Ich möchte, dass dies für alle Elemente gilt, die denselben Namen haben :)

Vielen Dank!

EDIT Der endgültige Code für jquery ist unten dargestellt:

$(function() { 
    $('.textarea-group > textarea[limit]').keyup(function() { 
     var max = parseInt($(this).attr('limit')); 
     var length = $(this).val().length; 
     length = max - length; 
     $('.chars span', $(this).parent()).html(length); 
    }); 
}); 

Credits Francisco (Antwort) und Akshay (integer Parse)

Answer 1

this kein String, so sollte dies fehlschlagen:

$(this + ' > .chars span') 

In adition, this sollte die gextarea sein, so müssen Sie zuerst tra vel eine Ebene höher das DOM.

Stattdessen versuchen mit der second parameter context:

$('.chars span', this.parentNode) 

Oder verwenden parent und find:

$(this).parent().find('.chars span')