Javascript 将px中的.width（）转换为jQuery中用于引导的%x27；在流体中添加标签

我目前有：

jquery

$(document).ready(function () { 
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var wide = $(this).width(), /* create a variable that holds the width of the form */
            label = $(this).prev('.add-on').width(); /* create another variable that holds the width of the previous label */
        $(this).width( wide - label ); /* subtract the label width from the input width and apply it in px */
    });
});

html

位置

显示问题的小提琴：

但是，这将在

px

中应用新的宽度，我使用的是流体布局，需要再次将其设置为百分比

---

是否有方法将应用于

%

的

px

转换为

%

？

这将获取父级的宽度并仅计算百分比

$(this).width((wide - label)/$(this).parent().width()*100+'%');

---

这将计算整个文档的百分比：

$(this).width((wide - label) * 100 / $(document).width()+'%');

---

事实上，你忽略了计算中的填充。我认为这个代码对你有帮助

编辑：

以下是firefox的代码：

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth();
        /* create another variable that holds the width of the previous label */
        $(this).width( (1-(label + $(this).outerWidth() - $(this).width())/$(this).parent().width()) *100 + "%" );
    });
});

这是chrome的代码：

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth(); 
        /* create another variable that holds the width of the previous label */
        $(this).css("width", (1-(label)/$(this).parent().width()) *100 + "%" );
    });
});​

对于chrome，必须设置属性css如果在检查width css属性时使用width方法，则属性值不等于计算的值

在jsFiddle上有一个例子

有一个带有两个实现的JSFIDLE。现在，您只需检测浏览器。

基于我之前的一个测试

---

我并不是真的在寻找文档的百分比：/Ok，所以这看起来很接近。。这使得我的输入表单的大小（宽度）相同，就好像我根本没有任何jquery一样。。（几乎就好像我丢失了前半段代码。@鲁本，这很奇怪，我很难可视化你的HTML，所以我无法告诉你到底发生了什么。你可以记录父项、宽标签和最终百分比的值，看看它们是否有意义。如果没有，那么可能会告诉你出了什么问题。@鲁本，这里是一个j我做了很多测试。据我所知，这个例子中的宽度是从~98%到~78%。这是基于我给包含div的任意宽度300。如果包含div的宽度足够大，可能会使它看起来没有变化。我使用twitter的boo的流体支架布局tstrap如果有帮助吗？@Reuben这就是你想要的吗？我不知道你为什么需要一个百分比。因为你是在动态计算，这意味着在页面加载后，你会根据页面大小获得宽度，所以我不确定使用百分比有何帮助。另外，如果你以后调整它的大小，那么标签的宽度会增加dth是以像素为单位的，这意味着您每次都必须重新计算它。看看外层宽度，宽度不包括边框等（IIRC）这看起来也很接近！虽然它不能完全工作…即使在你的小提琴中！你使用的是哪种导航器？我想在紧的地方有一点marge。另一个问题。你想要同样的高度吗？你说的导航器是什么意思？猜测浏览器？（chrome for mac）是右边的边距：（不！不需要高度：）好的，你在chrome上是对的，它不起作用。欢迎参加web开发--，宽度计算的问题。在chrome上，div的实际宽度不等于css属性，而对于firefox来说，它是。

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth(); 
        /* create another variable that holds the width of the previous label */
        $(this).css("width", (1-(label)/$(this).parent().width()) *100 + "%" );
    });
});​

var getPercent = function(elem) {
    var elemName = elem.attr("id"),
        width = elem.width(),
        parentWidth = elem.offsetParent().width(),
        percent = Math.round(100 * width / parentWidth);
    return percent;
};