将功能分别应用于所有项目? [英] Apply function to all items individually?

问题描述

我正在尝试使用jQuery动态调整输入字段的大小，我的函数可以运行，但是将相同的值应用于每个输入，而不是分别声明每个输入的宽度.谁能看到我可能做错了什么?

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/

推荐答案

您可以轻松地将函数转换为.each的参数.只需根据情况将选择器更改为$(this)或$(this).find:

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

这篇关于将功能分别应用于所有项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！