javascript - 分别将功能应用于所有项目？

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