Question

Good Day.
I’m using table-less forms and want to size the <label> block-element. This I can do, like:
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

This does the job just fine. All the <label> fields are the same width and my table-less form looks pretty.

However, if I want to add a second form on the page, I try to loop thru each set of forms, grab the widest width, and set the <label> to that width; then move on to the next form on the page and do the same.

Problem: I can’t seem to get the second form’s <label> width to be anything different from the first form’s <label> width.

I tried this 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 -->

And here’s the jQuery that isn’t doing the job:

$(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

Any help would be great!
There might be a typo above, but I’m certain there’s not in my code.
I really don’t want to name the second form divs something else and repeat all the jQuery code, but don’t have a problem naming the second divs something else if I don’t have to repeat all the jQuery code (hope I’m making sense there).

Thanks.

Answer 1

Fix your HTML (remove the duplicate IDs), then try

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

instead of

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

Change

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

into

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

so the jQuery selector is within the scope of one form at a time.

Also, it might be a good idea to have var w = 0; before $(".ffContainer label", this).each(...) to ensure that the value of w doesn’t leak from one run to the next.

UPDATE: I went ahead and plugged your code into a test page. There was a nesting issue that was hard to see from the question. I cleaned it up a bit and the code below appears to be working.

$(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

UPDATE: For details about jQuery selector context
Check out this blog post referenced in this other question