JQuery width（）返回错误的值？

Question

我的情况是这样的：

我们有两个类似的弹出窗口，这样的弹出窗口由工厂生成（在Javascript中），以便它们共享相同的公共事件＆amp;功能。其中之一是名为resizeFormRowService的自定义调整大小函数。当浏览器窗口触发resize事件时，它将被调用。

由于弹出窗口处于重复

之类的结构中

<div class="row">
    <div> //label </div>
    <div> //data  </div>
</div> 

resizeFormRowService首先使用类row获取父div的宽度，然后将其第一个div子（标签）设置为固定宽度（如140px），并设置为第二个div的宽度为＆＃34;父母 - 第一个孩子＆＃34;。所有这些都是由JQuery完成的（如下所示）

我发现Chrome中的一个弹出窗口有一个奇怪的行为（我正在比较两个类似的弹出窗口）。

第二个子div（即数据）的计算宽度比其他弹出对应字段多5px。所以我在resizeFormRowService中记录了一些内容，以追踪正在发生的事情。

＆＃13;

＆＃13;

StandardTemplatePopup.prototype.resizeFormRowService = function () {
  var self = this;
  var $popUp = self.getPopup();

  ...
  
  var $rows = $popUp.find('.row');
  $rows.each(function () {
    var $this = $(this);
    var $firstDiv = $this.find('div:first');
    var $secondDiv = $this.find('div:eq(1)');
    var labelColWidth = self.options('labelColWidth');

    // labelColWidth is something we can config, so both popup firstDiv's width is the same
    // so I think the problem must be in $this.width()
    $firstDiv.width(labelColWidth);
    
    //Add by me, want to see which row is this 
    console.log($this);
    //Add by me, see this row's width
    console.log($this.width());

    var width = $this.width() - $firstDiv.outerWidth() - 0.5;
    $secondDiv.width(width);
  });
  ...
};

＆＃13;

＆＃13;

＆＃13;

在两个弹出窗口中运行此操作，一个日志270px，而另一个日志265px！所以我试着看看它们是哪一行，此时我想可能在第一个弹出窗口中有一些脚本改变了行的边距/填充，从而改变了它的宽度，但令人惊讶的是它不是情况下

这是第一个弹出窗口

这是第二个弹出窗口

如图所示，第二个子div的计算宽度相差5px，但父行的宽度完全相同，这与我在{ {1}}！

所以我的问题是：是否有任何已知的JQuery width（）问题导致我的问题？如果不是，那么任何指出潜在原因的建议都会受到赞赏。

编辑：

我希望这可以通过试验和暗示暗示某人，我的一个队友。错误，在第一个弹出窗口的末尾添加一个空div

resizeFormRowService

然后一切都很顺利......两个弹出窗口都会正确调整大小。

PS1：结果较小：265px是正确的预期结果

PS2：图像中的高度差异是由于第二个子div的错误计算宽度导致内容太宽而无法在一行中显示，因此高度自动增加

Answer 1

我只想把它放在一个答案中，因为评论不是很有见地。

对我而言，您的计算似乎太快并且不能保持任何预设值。有点像说，CSS过渡会100％肯定会让你搞砸了。我个人会更喜欢这样编码（我自己是一名前锋）

$rows.each(function () {
  var $this= $(this);
  var $firstDiv = $('div:first', $this);
  var $secondDiv = $('div:eq(1)', $this);
  var labelColWidth = self.options('labelColWidth');

  // labelColWidth is something we can config, so both popup firstDiv's width is the same
  // so I think the problem must be in $this.width()
  $firstDiv.width(labelColWidth);

  //Add by me, want to see which row is this 
  console.log($this);
  //Add by me, see this row's width
  console.log($this.width());

  //why recalculate the $firstDiv.width when you have labelColWidth?
  //try to avoid simple names like "width" for prevention of double naming
  var newWidth = $this.width() - labelColWidth - 0.5;
  $secondDiv.width(newWidth);
});

- 我应该提一下，div:first和div:eq(1)之类的选择器在插入: after或: before等内容时往往会中断。我建议你改用类。