CODEWITHSUNDEEP
jquery
Charlie Wedel
Charlie Wedel

Reputation: 79

How to condense this jquery to allow an unlimited number of options

I have this following jquery which will set all the elements with a class (ex. equal1) to match the height of the tallest element with that class.

This code only allows 11 different heights to be set. Is there a way to write this code so that the class could be anything that starts with equal-[suffix], such as equal-blurbs.

This way there can be an unlimited number of different groups of equal height elements with classes like equal-blurbs, equal-price, equal-boxes, etc.

(function($) {

  // Window Load
  $(window).load(function() {
    var viewport = $(window).innerWidth();

    if (viewport >= 960) {
      equal_height($('.equal1'));
      equal_height($('.equal2'));
      equal_height($('.equal3'));
      equal_height($('.equal4'));
      equal_height($('.equal5'));
      equal_height($('.equal6'));
      equal_height($('.equal7'));
      equal_height($('.equal8'));
      equal_height($('.equal9'));
      equal_height($('.equal10'));
      equal_height($('.equal11'));
    }
  });

  // Window Resize
  $(window).resize(function() {
    var viewport = $(window).innerWidth();

    if (viewport >= 960) {
      equal_height($('.equal1'));
      equal_height($('.equal2'));
      equal_height($('.equal3'));
      equal_height($('.equal4'));
      equal_height($('.equal5'));
      equal_height($('.equal6'));
      equal_height($('.equal7'));
      equal_height($('.equal8'));
      equal_height($('.equal9'));
      equal_height($('.equal10'));
      equal_height($('.equal11'));

    } else {
      $('.equal1').attr('style', '');
      $('.equal2').attr('style', '');
      $('.equal3').attr('style', '');
      $('.equal4').attr('style', '');
      $('.equal5').attr('style', '');
      $('.equal6').attr('style', '');
      $('.equal7').attr('style', '');
      $('.equal8').attr('style', '');
      $('.equal9').attr('style', '');
      $('.equal10').attr('style', '');
      $('.equal11').attr('style', '');
    }
  });

  function equal_height(group) {
    var tallest = 0;

    $(group).attr('style', '');

    group.each(function() {
      var this_height = $(this).height();

      if (this_height > tallest) {
        tallest = this_height;
      }
    });

    group.height(tallest);
  }

})(jQuery);
div.equal1 {
  border: 1px solid black;
  padding: 5px;
  vertical-align: top;
}

column {
  width: 24%;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </column>
</body>

Upvotes: 1

Views: 45

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

You can use attribute starts with selector or in case there are multiple classes for the element then it won't work as you expected in that case, use attribute contains with selector.

Now for grouping based on the class you need to iterate over the collection and need to call function only for unique classes to avoid repetition use an additional object.

For example, you can do something like this(assuming there is only one class for elements)

(function($) {

  // Window Load
  $(window).load(function() {
    var viewport = $(window).innerWidth();

    if (viewport >= 960) {
      get_unique_and_call_equal();
    }
  });

  // Window Resize
  $(window).resize(function() {
    var viewport = $(window).innerWidth();
    if (viewport >= 960) {
      get_unique_and_call_equal();
    } else {
      $('[class^="equal"]').attr('style', '');
    }
  });

  function equal_height(group) {
    var tallest = 0;

    $(group).attr('style', '');

    group.each(function() {
      var this_height = $(this).height();

      if (this_height > tallest) {
        tallest = this_height;
      }
    });

    group.height(tallest);
  }

  function get_unique_and_call_equal() {
    var ref = {};
    $('[class^="equal"]').each(function() {
      if (!(this.className in ref)) {
      // if there is chance for multiple class for elements
      // then you have to extract the class name using regex
      //or some other way
      // for eg: this.className.match(/\bequal[^ ]*/)[0]
        var className = this.className;
        equal_height($('.' +className ));
        ref[className] = true;
      }
    });
  }

})(jQuery);
div.equal1 {
  border: 1px solid black;
  padding: 5px;
  vertical-align: top;
}

column {
  width: 24%;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<body>
  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </column>
</body>

UPDATE : To make work with elements which have multiple classes(including equal*) then you can do something like this with attribute contains with selector.

(function($) {

  // Window Load
  $(window).load(function() {
    var viewport = $(window).innerWidth();

    if (viewport >= 960) {
      get_unique_and_call_equal();
    }
  });

  // Window Resize
  $(window).resize(function() {
    var viewport = $(window).innerWidth();
    if (viewport >= 960) {
      get_unique_and_call_equal();
    } else {
    // I'd added space since multiple classes are seperated by space
      $('[class^="equal"],[class*=" equal"]').attr('style', '');
    }
  });

  function equal_height(group) {
    var tallest = 0;

    $(group).attr('style', '');

    group.each(function() {
      var this_height = $(this).height();

      if (this_height > tallest) {
        tallest = this_height;
      }
    });

    group.height(tallest);
  }

  function get_unique_and_call_equal() {
    var ref = {};
    $('[class^="equal"],[class*=" equal"]').each(function() {
      if (!(this.className in ref)) {
        // extract equal prefixed class from class list
        var className = this.className.match(/\bequal[^ ]*/)[0];
        equal_height($('.' + className));
        ref[className] = true;
      }
    });
  }

})(jQuery);
div.equal1 {
  border: 1px solid black;
  padding: 5px;
  vertical-align: top;
}

column {
  width: 24%;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<body>
  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </column>

  <column>
    <div class="equal1">
      <h2>Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </column>
</body>

Upvotes: 1

DIEGO CARRASCAL
DIEGO CARRASCAL

Reputation: 2129

just do:

(function($) {

// Window Load
$(window).load(function() {
 var viewport = $(window).innerWidth();

 if (viewport >= 960) {
  equal_height($('.equal'));
 }
});

 // Window Resize
 $(window).resize(function() {
 var viewport = $(window).innerWidth();

 if (viewport >= 960) {
  equal_height($('.equal'));
 } else {
  $('.equal').attr('style', '');
 }
});

function equal_height(group) {
 var tallest = 0;

 $(group).attr('style', '');

 group.each(function() {
  var this_height = $(this).height();

  if (this_height > tallest) {
    tallest = this_height;
  }
});

 group.height(tallest);
}

})(jQuery);

I believe this code can be optimized furthermore, but I'm not sure what the group variable contains and is not clear why you need different classes to style the same way, depending on your DOM structure you could have them contained in a different element and that way you could point to them...

Upvotes: 0

Related Questions