jquery：如何使用 .each() 调整元素大小

Question

再会。 我正在使用无表表单，并且想要调整 块元素的大小。我可以这样做，例如： HTML：

<div id="main-content">
  <form id="profile" blah...>
    <div id="fContainer">
      <div class="ffContainer">
        <label for='email'>Email:</label>
        <input type="text" id="email" blah...>
      </div>
      <div class="ffContainer">
        <label for='name'>Name:</label>
        <input type="text" id="name" blah...>
      </div>
    </div><!-- end fContainer -->
   </form>
</div><!-- end main-content -->

jQuery：

$(document).ready(function(){
  $(".ffContainer label").each(function(){
     if( $(this).width() > w) {
       w = $(this).width();
     };
  });
  // have widest label now make all of them the same size so that they fit
  $(".ffContainer label").attr("style","width:" + Math.round( $(window).width() / w) + "%;");

}); // end document.ready

这可以很好地完成工作。所有 字段的宽度相同，我的无表表单看起来很漂亮。

但是，如果我想在页面上添加第二个表单，我会尝试循环遍历每组表单，获取最宽的宽度，并将 设置为该宽度；然后转到页面上的下一个表单并执行相同的操作。

问题：我似乎无法使第二个表单的 宽度与第一个表单的 宽度有所不同。

我尝试了这个 HTML：

<div id="main-content">
  <form id="profile" blah...>
    <div id="fContainer">
       <div class="ffContainer">
         <label for='email'>Email:</label>
         <input type="text" id="email" blah...>
       </div>
       <div class="ffContainer">
         <label for='name'>Name:</label>
         <input type="text" id="name" blah...>
       </div>
    </div><!-- end fContainer -->
  </form>

  <form id="delta" blah...>
    <div id="fContainer">
      <div class="ffContainer">
        <label for="car">Car:</label>
        <input type="text" id="car" blah...>
      </div>
      <div class="ffContainer">
        <label for='engine'>Engine:</label>
        <input type="text" id="engine" blah...>
      </div>
    </div>
   </form>
 </div><!-- end main-content -->

这是没有完成这项工作的 jQuery：

$(document).ready(function(){
  $("#main-content #fContainer").each(function(){  // loop thru both #fContainer blocks
    $(".ffContainer label").each(function(){       // loop thru all label elements
       if( $(this).width() > w){
         w = $(this).width();
       };                                          // have widest label as var w
       $(".ffContainer label").each(function(){    // loop thru all labels again to indivdually set each attr
          $(this).attr("style","width:" + Math.round($(window).width() / w) + "%;");
       });
     }); // end .ffContainer label loop MOVE ON TO NEXT FORM GROUP
  }); // end #fContainer loop
 }); // end document.ready

任何帮助都会很棒！ 上面可能有错字，但我确信我的代码中没有错字。 我真的不想将第二个表单 div 命名为其他名称并重复所有 jQuery 代码，但是如果我不必重复所有 jQuery 代码，那么将第二个 div 命名为其他名称也没有问题（希望我'我在那里说得通）。

谢谢。

Answer 1

修复您的 HTML（删除重复的 ID），然后尝试

$('form').each(........)

为

$("#main-content #fContainer").each(........)

更改

$(".ffContainer label").each(...)

，

$(".ffContainer label", this).each(...)

以便 jQuery 选择器一次在一个表单的范围内。

另外，在 $(".ffContainer label", this).each(...) 之前添加 var w = 0; 可能是个好主意，以确保w 的值不会从一次运行泄漏到下一次运行。

更新：我继续将您的代码插入到测试页中。从问题中很难看出一个嵌套问题。我对其进行了一些清理，下面的代码似乎可以正常工作。

$(document).ready(function(){
  $("form").each(function(){  // loop thru both #fContainer blocks
    var w = 0;
    $(".ffContainer label", this).each(function(){       // loop thru all label elements
      if( $(this).width() > w){
        w = $(this).width();
      }
    });

    var percent_width = (Math.round(w / $(window).width() * 100)) + "%"; // This calc only needs to be performed once per form.
    $(".ffContainer label", this).each(function(){    // loop thru all labels again to indivdually set each attr
      $(this).width(percent_width);
    });
  }); // end #fContainer loop
}); // end document.ready

更新：有关 jQuery 选择器上下文的详细信息
查看 这篇博文 中引用的 < a href="https://stackoverflow.com/questions/553766/jquery-selector-context-question">这个其他问题