Javascript 在加载和调整大小时从jQuery UI的可调整大小的div中获取宽度（以百分比为单位）

所以我把这两个div放在了一起。这两个div都可以使用jqueryui调整大小

在调整div的大小时，我获取宽度，将其转换为一个百分比，并将其输出到相应的输入，但发生了一些奇怪的事情

HTML：

<div id="parent">
   <div id="div1"> My Data1
     <input type="text" class="div1">
   </div> 
   <div id="div2"> My Data2
     <input type="text" class="div2">
   </div> 
</div>

CSS：

#parent{
    position:absolute;
    height:100%;
    margin:0;
    padding:0;
    width:100%;
}
#div1{
    position:relative;
    float:left;
    height:100%;
    width:50%;
    background-color:#A2A;
}
#div2{
    position:relative;
    float:left;
    height:100%;
    width:50%;
    background-color:#BBB;
}
.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
    background: black;
}

小提琴：

发生的事情是，当我把div1变小时，宽度百分比甚至会一直上升到800%以上。当我把它加宽时，宽度百分比停止在20%。所以有点不对劲，但我找不到它在哪里

我正在努力实现的目标。 在页面加载时，两个div的宽度应为50%。当我把div1变小的时候，它应该一直到0%，当我把它变大的时候，它应该到100%

这意味着如果div1设置为25%，那么div2将有75% 当div1设置为58%时，div2为42%

---

谢谢大家的帮助。

我希望这对你有所帮助。 您应该使用此数学来获得百分比：

Math.round(( docWidth - elemWidth ) / docWidth * 100)

---

我只需订购代码并更改计算行，看看这个示例：

$("#div1").resizable();

$('#div1').resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
});

$(window).resize(function(){
    elementResize()
});

$(document).ready(function(){
    elementResize()
});

function elementResize(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
   $('#div1').height($("#parent").height()); 

   var parentwidth = $("#parent").width(),
       div1width = $("#div1").width(),
       div2width = $("#div2").width(),
       div1percentage = Math.round((div1width / parentwidth) * 100),
       div2percentage = Math.round((div2width / parentwidth) * 100);

   $('.div1').val(div1percentage);
   $('.div2').val(div2percentage);
}

---

好的，正如我在这个问题的上一次迭代中所指出的，

$（“.div1”）.width（）

将获得类为“div1”的

元素的宽度。该

的父级是id为“div1”的

。我不确定我是否理解计算输入元素宽度与div宽度之比的意义。哦，这很容易解释。最终用户在应用程序的后端看到的基本上是我们在小提琴中看到的东西，没有那些将被隐藏的输入。然后用户拖放

列（#div1&2）

，直到用户满意为止。假设一个是25%，另一个是75%。然后，这些值也会输入到隐藏的输入中。保存应用程序时，将存储输入。然后在前端，这些保存的值用于生成列宽。希望这能把事情弄清楚。我不认为在最初的问题中添加所有这些内容有什么意义？@Pointy输入实际上与问题无关，它们只是简单地显示值。就本问题而言，它也可能是一个console.log或警报。我只想使div的大小可以调整，并以百分比的形式返回宽度，从0到100。输入肯定与小提琴的工作方式有关，因为

$（“.div1”）

引用了div中id为“div1”的

元素。谢谢@Zeev Katz，是的，我觉得它很有用。我只是检查了一下小提琴，但没有真正理解要点；-）当你把它调整一点点，仅仅一个像素，你就能明白我的意思。左边的输入应该是

80%

，右边的输入应该是

20%

，但是左边的输入应该是

24.9%

，右边的输入应该是

99.41%

，所以我想我在计算宽度时弄错了。嘿，伙计，谢谢，我没想到会这样，但我真的很喜欢。我喜欢你把它放到一个函数中，而不是像我一样复制/粘贴它。您选择.floor（）而不是.round（）有什么具体原因吗？很抱歉，我刚刚注意到这些值是错误的。如何解释。。。当我减小宽度时，百分比会上升而不是下降。所以不是说10%，而是说90%。在我自己的小提琴，我重做了整个计算，它是工作，但喜欢你的功能更好的方式。你能用这个函数更新这个小提琴吗？您是否可以编辑您的答案以反映最新的小提琴，并更改答案中的小提琴链接。我删除了我的答案，因为这一个更好。有没有可能在上面盖一顶帽子。所以它永远不会超过100%或低于0%。当我将第一个div一直向右移动时，输入显示101%，这将破坏目的。接受答案并删除我自己的div，因为这是我将要使用的div。你能帮我实施这个上限吗？如果你想的话我想去聊聊，解释的好一点！

$("#div1").resizable();

$('#div1').resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
});

$(window).resize(function(){
    elementResize()
});

$(document).ready(function(){
    elementResize()
});

function elementResize(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
   $('#div1').height($("#parent").height()); 

   var parentwidth = $("#parent").width(),
       div1width = $("#div1").width(),
       div2width = $("#div2").width(),
       div1percentage = Math.round((div1width / parentwidth) * 100),
       div2percentage = Math.round((div2width / parentwidth) * 100);

   $('.div1').val(div1percentage);
   $('.div2').val(div2percentage);
}