CODEWITHSUNDEEP
javascript
theShadraq
theShadraq

Reputation: 29

Javascript - class elements taking on properties of other class elements

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?

Upvotes: 0

Views: 49

Answers (2)

Flauwekeul
Flauwekeul

Reputation: 1009

You are setting a variable twice, each time with a different value. Basically you're doing this:

var thisMB = null;
thisMB = '1.25em';
thisMB = '4.4175em';

If you then check the value of thisMB you get the last value set: '4.4175em'.

I think this is what you want:

$("#Full .t16").each(function () {
  $(this).css('margin-bottom', '1.25em');
});

$("#Full .t8").each(function () {
  $(this).css('margin-bottom', '4.4175em');
});

UPDATE

A little shorter:

$("#Full .t16").css('margin-bottom', '1.25em');
$("#Full .t8").css('margin-bottom', '4.4175em');

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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

Upvotes: 2

Related Questions