将功能分别应用于所有项目? | 将功能分别应用于所有项目

本文介绍了将功能分别应用于所有项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用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

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