Question

can anyone explain me what happen here??

i have this html code:

   <div class="calculadora">

      <div class="clear campos">
       <label>Amount</label>
       <input class="fi" id="amount" type="text" name="amount" value=""/>
      </div>

      <div class="clear campos">
       <label>Down Payment</label>
       <input class="fi" id="downPay" type="text" name="downPay" value=""/>
      </div>

      <div class="clear campos">
       <label>Years</label>
       <input class="fi" id="years" type="text" name="years" value=""/>
      </div>

      <div class="clear campos">
       <label>Rate</label>
       <input class="fi" id="rate" type="text" name="rate" value=""/>
      </div>

      <input id="cal" type="button" value="cacular"/>
      <div class="result"></div>
          </div>

And i’m making a jquery plugin, but i need to get all the attr(‘value’) of each input, and i´m doing this way:

this.each(function(){

        var obj = $(this),
        vacio = parseFloat( $('.fi', obj).attr('value'));

       // some code...

But what happens it’s that only get the first value of the first input… why??

BUT!! if i make this way :

var s = $('.fi', obj).each(function(){
             alert ($(this).attr('value'))
            });

it workss!!! Why?? this is good???

Tks in advance if anyone can explain to me.

Answer 1

.attr() returns the value of the specified attirbute from the first element in the collection is called upon.

From the doc:

Get the value of an attribute for the first element in the set of matched elements.

When you make it the other way, you are extracting the value attribute data for each element in the matched set.

One way to achieve what you’re after could be done by using the .map() function, which returns a jquery array:

var vals = $('.fi', obj).map(function(){
    return this.value;
});

To transform it to a pure javascript array, you use vals.toArray();

Note: no need for jquery to get the value of an input because this in event handlers and in iteration on elements is the current DOMElement, so you can just do this.value.