將功能分別應用於所有項目？

Question

我試圖通過jQuery動態調整輸入字段的大小，我的函數可以工作，但對每個輸入應用相同的值，而不是獨立聲明每個輸入的寬度。任何人都可以看到我可能做錯了什麼？

的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/

Answer 1

您可以輕鬆地將您的功能轉換爲.each的參數。簡單地改變你的選擇，以$(this)或$(this).find視情況：

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

Answer 2

改變了你的代碼以使用。每個方法，該方法通過一個採用相同的CSS類之一的全部的元件：

$(.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>

Answer 3

使用$（ '輸入式'）寬（）將只需要第一個元素的寬度。

如果是很多元素，那麼你需要使用的。每個函數，然後用你的代碼中使用$（這）是這樣的：

$(".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); 
}); 

Answer 4

您的代碼不考慮每個input的背景元件;使用this來引用目標父級和label元素。使用.width(function() { .. })像這樣：

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

DEMO，DEMO

而且，因爲你可能無法再使用該定義的函數，你可能希望你的代碼更改爲：

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

DEMO