Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>We are going to get an array of all elements with a clasname of .makeEqualHeight. This array will have multiple different element types (i.e. divs, lis, etc.). Now we want to find the best performing method to determine the height of the tallest element of its type. If there are div's and li's then we want to retrieve two different max heights. </p> <p>The trick here is that you get your array of elements, and get the max height by a filtered subset of that array of elements. </p> <p>First we have to determine what the element types are in the array. We do this by looping through the array and getting the property tagname. If the tagname does not already exist in the array, add it to the array of element types.</p> <pre><code>$arrAllTargets.each(function () { var p = $(this).prop("tagName"); if(arrElTypes.indexOf(p) &lt; 0) { arrElTypes.push(p); } }); </code></pre> <p>Now that we have an array of element types, lets loop through that array. In each iteration we are going to filter the master array of elements by the element type. We will call the getMaxHeight function using our filtered list. Rinse and repeat.</p> <pre><code>for(i = 0; i &lt; arrElTypes.length; i++) { maxHeight = getMaxHeight($arrAllTargets.filter(arrElTypes[i])); $arrAllTargets.filter(arrElTypes[i]).css("height",maxHeight); } </code></pre> <p><a href="http://jsfiddle.net/bpKxQ/2/" rel="nofollow">http://jsfiddle.net/bpKxQ/2/</a></p> <p>edit: The heights look very similar, the LI elments are 140px and the div elements are 120px. They are so close because you are using outerHeight(). Try using height() instead, since you are setting the height (not the outerHeight) when you edit the css attribute.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload