CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

Apply function to all items individually?

Im trying to resize input fields on the fly using jQuery, my function works but applies the same value to each input as opposed to each input's width being declared independatly. Can anyone see what I may be doing wrong?

jQuery

function inputSize(){
   var inputContainer = $('.input-style').width();
   var labelWidth = $('.input-style label').width() + 40; // 40 is the padding + margin
   var inputNewSize = inputContainer - labelWidth;    
   $('.input-style input').css('width', inputNewSize);
}

inputSize();

http://jsfiddle.net/r76cgn6a/

Upvotes: 0

Views: 543

Answers (4)

Baraa Al-Tabbaa
Baraa Al-Tabbaa

Reputation: 753

Using $('.input-style').width() will take only the first element width.

If there're many elements then you need to use .each function, then use $(this) with your code like this:

$(".input-style").each(function(index,item){
    var inputContainer = $(this).width();
    var labelWidth = $(this).find("label").width() + 40; // 40 is the padding + margin
    var inputNewSize = inputContainer - labelWidth;    
    $(this).find("input").css('width', inputNewSize);
});

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

Your code is not considering the context of each input element; use the this to reference the target parent and label elements. Use .width(function() { .. }) like so:

$('.input-style input').width(function() {
    return $(this).parent().width() - $(this).parent().find('label').width() - 40;
});

DEMO, DEMO

And since you may not re-use the defined function you may want to change your code to:

$(function() {
    $('.input-style input').width(function() {
        return $(this).parent().width() - $(this).parent().find('label').width() - 40;
    });
});

DEMO

Upvotes: 2

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

You can easily convert your function to be an argument of .each. Simply change your selectors to $(this) or $(this).find depending of the case :

function inputSize(){
    var inputContainer = $(this).width();
    var labelWidth = $(this).find('label').width() + 40; // 40 is the padding + margin
    var inputNewSize = inputContainer - labelWidth;    
    $(this).find('input').css('width', inputNewSize);
}

$('.input-style').each(inputSize);

Fiddle

Upvotes: 3

Alexander Dayan
Alexander Dayan

Reputation: 2924

Changed you code to use .each method which takes all the element of the same css class one by one:

$(.input-style).each(function inputSize(){
    var inputContainer = $('.input-style').width();
    var labelWidth = $('.input-style label').width() + 40; // 40 is the padding + margin
    var inputNewSize = inputContainer - labelWidth;    
    $('.input-style input').css('width', inputNewSize);
});

inputSize();
body {font-size:10px;}

.input-style {
    background: #e7e7e7;
    overflow: hidden;
    padding: 10px;
}
.input-style label {
    margin-right: 20px;
    font-family:'Raleway', sans-serif;
    font-weight: 400;
  
    font-style: italic;
    color: #818181;
    font-size: 1.8em;
    float: left;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}
.input-style input {
    margin-right: 20px;
    font-family:'Raleway', sans-serif;
      background:yellow;
    font-weight: 400;
    font-style: italic;
    color: #818181;
    font-size: 1.8em;
    outline: 0;
    padding: 0;
    border: 0;
}
<div class="input-style">
    <label>Name*</label>
    <input data-val="true" data-val-length="The field name must be a string with a maximum length of 500." data-val-length-max="500" data-val-required="Please complete this field" id="Name" name="Name" required="required" type="text" value="">
</div>
<div class="input-style">
    <label>Confirm Password*</label>
    <input data-val="true" data-val-equalto="passwords do not match" data-val-equalto-other="*.Password" data-val-length="The field re-enter password must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="Please complete this field" id="ComparePassword" name="ComparePassword" required="required" type="password" value="">
</div>

Upvotes: -1

Related Questions