jQuery ready() and resize() in one?

I have the following code:

var $parent_height = $(".group .field-item:first-child").height();//Get height of one of the containers...

$(".group .field-items a").each(function(){
   //Get height of text by making temporary HTML container for it.
   var $child = $(this).html();
   var $temp = '<span>'+$child+'</span>';
   delete $temp;
   var $child_height = $(this).find('span:first').height();
   //End get height of text...

   //If the link is taller than the parent, add class meant to assist with container height.
   if($child_height > $parent_height){

   //Otherwise, remove the class.
   if($child_height < $parent_height){


Basically all it does is resize some wrapped links. It makes the list(s) I have on the page look better. Now, I would’ve gone down the CSS-only route, but this seemed to be a better approach.

That aside, is it possible to run the above in both ready and resize contexts without duplication?

Feedback is appreciated.


Why don’t you put that code in a function e.g. resizeLinks(), then you can do this:

  // Variables that you only need to declare once here

  function resizeLinks(){

  $(window).on("resize", resizeLinks);


If you put this code at the bottom of your document, just before your closing </body> tag, you can also do away with the call to $(document).ready(). See here as to why.