Question

This question is an extension of jQuery Character Counter using class?.

I would like to add a data-content="####" to my textarea field and then use jQuery to pull out the numerical value and apply that to the character counter limiter.

<textarea id="field1" class="input-xlarge limitChars" data-content="2000" rows="2" name="field1"> this field would have a limit of 2000 chars

<textarea id="field2" class="input-xlarge limitChars" data-content="1000" rows="2" name="field2"> this field would have a limit of 1000 chars

<textarea id="field3" class="input-xlarge limitChars" data-content="1500" rows="2" name="field3"> and this one would be 1500 chars.

From my other question’s solution (see solution below), I’m assuming I’d need to pull out the data-content from the DOM and then apply that to the goal. I just don’t know how to pull out the value from data-content and would appreciate some help.

$(document).ready(function(){
    $(".limitChars").each(function() {
        $(this).counter({
            goal: 500
        });
    });
});

=====================================================
With the extended dialog that occurred, I thought it might be helpful to show what I actually ended up with:

HTML

<textarea id="field1" class="input-xlarge" counter-limit="2000" rows="2" name="field1"> this field would have a limit of 2000 chars

JavaScript/jQuery

$("[data-counter-limit]").each(function() {
      var $this = $(this), limit = +$(this).data("counter-limit");
      $this.counter({
        goal: parseInt(limit,10)
        //  goal: limit
      });
});

Answer 1

Use .data() method to extract values from data- attributes. Then use parseInt(string, radix) to convert it to a number

$(document).ready(function(){
    $('.limitChars').each(function() {
        var self = $(this);
        self.counter({
            goal: parseInt(self.data('content'),10)
        });
    });
});