Question

Below is a code snippet. I’m attempting to affect the class attribute margin-bottom based on both size of window and position. I’ve gotten this to work in all instances of height, width, etc…but for some reason with margin-bottom, all classes take on the size of whichever of my javascript functions come last. I’m not sure if that makes sense? Code below:

//Javascript
var thisMB = null;
$("#Full").find(".t16").each(function () {
                thisMB = '1.25em';
            });
            $("#Full").find(".t8").each(function () {
                thisMB = '4.4175em';
            });

 $(this).css("margin-bottom", thisMB);

<!--html-->
             <div>      
                  <ul class="tlist">
                        <li class="theTeams t16">1 1upLeft upLeft upLeft </li>
                        <li class="theTeams t16">1 1upLeft upLeft upLeft </li>
                        <li class="theTeams t16">3 1 upLeft upLeft upLeft </li>
                        <li class="theTeams t16">4 1 upLeft upLeft upLeft </li>
                        <li class="theTeams t16">5 1 upLeft upLeft upLeft </li>
                        <li class="theTeams t16">6 1 upLeft upLeft upLeft </li>
                    </ul>
                </div>
                <div>
                    <ul class="tlist">
                        <li class="theTeams t8">1 upLeft upLeft upLeft </li>
                        <li class="theTeams t8">3 upLeft upLeft upLeft </li>
                        <li class="theTeams t8">5 upLeft upLeft upLeft </li>
                    </ul>
               </div>

Basically, my LI will take on the latter javascript function rather than the one the specific class instance they are found for. So the .t16 should have a margin-bottom of (say) 14 and the .t8 should be 42…they both are 42. If I move the order they are both 14.

Ideas?

Answer 1

var thisMB = null;
$("#Full").find(".t16").each(function () {
    thisMB = '1.25em';   <--- this assigns the same variable over and over again
 });
$("#Full").find(".t8").each(function () {
      thisMB = '4.4175em'; <--- so does this
});

$(this).css("margin-bottom", thisMB);   <--- this sets the element to thisMB = the final value.

You are assigning the variable over and over again, but assigning it to “this” outside of the loop. If you want to set the value of the selected element (this), it needs to be INSIDE the each(). loop