javascript - Applying a function/style to every each() iteration -

so got each loop loops through every '.related__item' , checks if contains image (using '.related__item-image') or not. if true, use correct function calculates text heights each '.related__item' , trigger dotdodot function.

what problem is, loops through each '.related__item' correctly , console.logs correct true or false depending on image. reason, gives same height all related items. believe somewhere within if statement, going wrong, can't figure out what.

how can make every iteration, loop gives true or false, sets correct heights elements and then goes on next , same thing. looking @ making each in , each?

jfiddle: https://jsfiddle.net/bwbelbnv/

or

js:

  var self = this;   var textblock = $('.text', self);   var titleheight = $('.related__item-title', self).outerheight(true);   var containerheight = $('.related__item', self).outerheight();   var imageheight = $('.related__item-image', self).outerheight();   var relateditems = $(".related-magazines .related__item");    var calculate_with_image = function() {     var totalheight = titleheight + imageheight;     textblock.css({height: containerheight - totalheight});     textblock.trigger("update.dot");   };    var calculate_without_image = function() {     textblock.css({height: containerheight - titleheight});     textblock.trigger("update.dot");   };     var related_resize = function() {     ( var = 0; < relateditems.length; i++ ) {       var element =  relateditems.eq(i);       var hasimage = element.find('.related__item-image', self).length === 1;       console.log($(element).text());       console.log(hasimage);        if (hasimage === true) {         calculate_with_image();         console.log('image');        } else if (hasimage === false) {         calculate_without_image();         console.log('text');       }     }   };    related_resize(); 

html: (stripped)

<div class="related-magazines"> <!-- container -->     <div class="content"> <!-- inner container -->      <div>       <h3>related pages</h3>     </div>      <!-- first column group -->     <div class="field-name-sections first">       <!-- related item w/ image -->       <div class="related__item hni-grid first">           <div class="related__item-section">             <a href="link/url">               <div class="related__item-image">                 <img class="item" src="img/url">               </div>               <div class="body">                 <div class="related__item-title">                   <h4>                     title                   </h4>                   <h5 class="related-magazine-title">                     subtitle                   </h5>                 </div>                 <div class="text">                   long description. etc etc etc.                 </div>               </div>             </a>           </div>         </div>          <!-- related item w/o image -->         <div class="related__item last">           <div class="related__item-section">             <a href="link/url">               <div class="body">                 <div class="related__item-title">                   <h4>                     title                   </h4>                   <h5 class="related-magazine-title">                     subtitle                   </h5>                 </div>                 <div class="text" data-padding-bottom="1">                   long description. etc etc etc.                 </div>               </div>             </a>           </div>         </div>       </div>      <!-- second column group -->     <div class="field-name-sections last">        <!-- related item w/ image -->       <div class="related__item">         <div class="related__item-section">           <a href="link/url">             <div class="related__item-image">               <img class="item" src="image/url">             </div>             <div class="body">               <div class="related__item-title">                 <h4>                   title                 </h4>                 <h5 class="related-magazine-title">                   subtitle                  </h5>               </div>               <div class="text">                 long description. etc etc etc.               </div>             </div>           </a>         </div>       </div>        <!-- related item w/ image -->       <div class="related__item">         <div class="related__item-section">           <a href="link/url">             <div class="related__item-image">               <img class="item" src="image/url">             </div>             <div class="body">               <div class="related__item-title">                 <h4>                   title                 </h4>                 <h5 class="related-magazine-title">                   subtitle                 </h5>               </div>               <div class="text">                 long description. etc etc etc.               </div>             </div>           </a>         </div>       </div>      </div>    </div> <!-- end content --> </div> <!-- end related magazines --> 

alright, i've stripped whole html structure give idea how looks like.

thanx, helps. problem in code calculate_with_image() , calculate_without_image() don't consider current .related__item @ all. values used in these functions computed before loop. that's why return same value each iteration.

comment: jquery-methods compute/return value , don't apply nodes in jquery selection, compute value first dom-node in selection. $('.related__item-image').outerheight() first fetches .related__item-image nodes document, returns outerheight() of first one.

that's 1 thing went wrong in code.

i'm not sure wether intention, think tried fetch related nodes first, , iterate on these lists (i mean part: var textblock = $('.text') , following lines). if there 1:1 relationship between these lists, fine (not good, ok). if not, you'll end in mess; avoid approach if possible. it's easy may go wrong. or may change , go wrong.
if got intentions wrong here, never mind.

i can't test wether following code produces expected result, since depends on css, think should job: (otherwise, you'll tell me what's wrong)

$(".related-magazines .related__item").each(function(){     //comment: jquery iterators provide current element `this`     var $this = $(this);    //the current item wrapped in jquery-object.     var containerheight = $this.outerheight();  //the height of particular item      //fetch related image, , it's outerheight     //returns `null` if no image found, wich replaced 0     var imageheight = $this.find('.related__item-image').outerheight() || 0;     //same related title:     var titleheight = $this.find('.related__item-title').outerheight(true) || 0;         //btw, work:     //var imageheight = $('.related__item-image', this).outerheight() || 0;     //and mean `this` , not cached `self`, not combination of find , self.      console.log($this.text());     console.log(imageheight > 0);      //inlined `calculate_with_image()` , `calculate_without_image()` because short,      //and identical, , need access same nodes used      //comment: jquery allows method-chaining     $this.find('.text') //get textblock         .height( containerheight - (titleheight + imageheight) )    //set it's height         .trigger("update.dot");     //and trigger      console.log(imageheight > 0? "image": "text"); }); 

one argue imageheight > 0 inaccurate, when testing wether there image or not. because there might image, height of 0. yes, computation wouldn't make difference.

there might problem image, leading height of 0. maybe it's not loaded yet, or maybe 1 of it's parents display:none, handling problem topic of different so-question.