Calculate different with for same class multiplying on page

Question

Hello all,

Im trying to build call to action button on my site using jQuery.

I have done it, but the only last problem I have is that I need to calculate width for .callright Problem is that the cWith is being inherited by other "buttons" instead of calculating new one for every single button on the page.

Im not sure if I made myself clear. My function bellow. Any help appresiated

 $(document).ready(function(){
    var MainClass = '.calltoaction'

    var c = $(MainClass)

    var cWidth = c.outerWidth()

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

    $(this).css('width' , cWidth);

       });

    });

Thank you

Answer 1

When you call c.outerWidth() it only returns the outer width of the first matching element. If you want to iterate through each of them, you would need to use a $.each loop.

Answer 2

If you have multiple '.calltoaction' elements, each with (possibly) multiple '.callright' elements contained within, then this might be what you're after. Otherwise please post some example markup.

 $(function(){
    $('.calltoaction').each(function() {
      var callToAction = this;
      $('.callright', this).each(function() {
        $(this).css('width' , callToAction.outerWidth());
      });
    });
  });