CODEWITHSUNDEEP
jqueryeach
Chris
Chris

Reputation: 889

jQuery Apply style to only first element

In the following code, I am trying to get the last if statement to only minus the margin-top from the FIRST div.wigDiv parent. Everything is working, except that its applying the negative margin to ALL div.wigDiv parents. Any ideas?

$('.wigCont').each(function() {

   //some other code here

   if ($('div.wigDiv', this).hasClass('noMargin')) {
      if (wigCount == 1) {
         var width = $('div.wigDiv', this).width();
         $('div.wigDiv', this).css({'margin-left':'-18px', 'width': width+36});

         if ($('div.wigDiv', this).parent().first()) {
            $('div.wigDiv', this).parent().css('margin-top','-20px');
         }
      }
   }
}

Upvotes: 2

Views: 790

Answers (4)

stacktrace
stacktrace

Reputation: 319

You're doing 

$('div.wigDiv', this).parent().css('margin-top','-20px');

Need to do parent().first().css :)

Upvotes: 0

Kevin B
Kevin B

Reputation: 95047

Quick note before answer: your last if statement will always be true because $('div.wigDiv', this).parent().first() returns an object.

To filter to only the first selected element, use .first()

$('div.wigDiv', this).parent().first().css('margin-top','-20px');

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

You just need to use .first as you have in that if condition. Also You don't need that if condition as it would apply only if it finds the matching elements.

$('div.wigDiv', this).parent().first().css('margin-top','-20px');

Full Code:

$('.wigCont').each(function() {

   if ($('div.wigDiv', this).hasClass('noMargin')) {
      if (wigCount == 1) {
         var width = $('div.wigDiv', this).width();
         $('div.wigDiv', this).css({'margin-left':'-18px', 'width': width+36});

         //below is the modified code
         $('div.wigDiv', this).parent().first().css('margin-top','-20px');
      }
   }
}

Upvotes: 1

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

Try this code:

$('.wigCont').each(function() {

   //some other code here

   if ($('div.wigDiv', this).hasClass('noMargin')) {
      if (wigCount == 1) {
         var width = $('div.wigDiv', this).width();
         $('div.wigDiv', this).css({'margin-left':'-18px', 'width': width+36});

         if ($('div.wigDiv', this).parent().is(':first-child')) {
            $('div.wigDiv', this).parent().css('margin-top','-20px');
         }
      }
   }
}

Upvotes: 2

Related Questions