對每個（）迭代應用函數/樣式

Question

因此，我爲每個循環遍歷每個'.related__item'並檢查它是否包含圖像（使用'.related__item-image'）或不。如果爲true，則使用正確的函數計算每個「.related__item」的文本高度並觸發dotdodot函數。

我的問題是，它正確地循環遍歷每個'.related__item'，並且console.logs根據圖像正確的真或假。但由於某種原因，它給出了相同的高度所有的相關項目。所以我相信在if語句的某個地方出現了一些問題，但我無法弄清楚究竟是什麼。

我怎樣才能讓這個每次迭代，循環給人以真或假，設置正確的高度，所有元素然後那張旁邊，做同樣的事情。我在看每一個？

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() { 
    for (var i = 0; i < 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：（剝離）

<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> 
        This is a title 
        </h4> 
        <h5 class="related-magazine-title"> 
        This is a subtitle 
        </h5> 
       </div> 
       <div class="text"> 
        This is a 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> 
        This is a title 
        </h4> 
        <h5 class="related-magazine-title"> 
        This is a subtitle 
        </h5> 
       </div> 
       <div class="text" data-padding-bottom="1"> 
        This is a 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> 
        This is a title 
       </h4> 
       <h5 class="related-magazine-title"> 
        This is a subtitle 
       </h5> 
       </div> 
       <div class="text"> 
       This is a 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> 
        This is a title 
       </h4> 
       <h5 class="related-magazine-title"> 
        This is a subtitle 
       </h5> 
       </div> 
       <div class="text"> 
       This is a long description. etc etc etc. 
       </div> 
      </div> 
      </a> 
     </div> 
     </div> 

    </div> 

    </div> <!-- end content --> </div> <!-- end related magazines --> 

Answer 1

好吧，我已經剝去了整個​​HTML結構，讓你知道它是怎麼樣的。

Thanx，這真的有幫助。代碼中的問題是calculate_with_image()和calculate_without_image()完全不考慮當前的.related__item。在循環之前計算這些函數中使用的所有值。這就是爲什麼他們爲每次迭代返回相同的值。

評論：即計算/返回值，並且不會在jQuery的選擇適用的東西到節點，計算從選擇的第一個DOM節點此值大多數jQuery的方法。因此，$('.related__item-image').outerHeight()首先從文檔中提取所有.related__item-image節點，但僅返回第一個節點的outerHeight()。

這是你的代碼出錯的一件事。

我不確定這是你的意圖，但我認爲你首先嚐試獲取所有相關節點，然後遍歷這些列表（我的意思是這個部分：var textBlock = $('.text')和下面的行）。如果這些列表之間存在1：1的關係，那麼罰款（不好，但確定）。如果沒有，你會結束一團糟。所以如果可能的話，通常要避免這種方法很容易出現問題。或者可能會改變，然後出錯。
如果我在這裏弄錯了你的意圖，沒關係。

我無法測試羯羊下面的代碼產生預期的結果，因爲它取決於你的CSS，但我認爲它應該做的工作：（否則，你會告訴我什麼是錯的）

$(".related-magazines .related__item").each(function(){ 
    //comment: jQuery iterators provide the current Element as `this` 
    var $this = $(this); //the current item wrapped in a jQuery-object. 
    var containerHeight = $this.outerHeight(); //the height of this particular item 

    //fetch the related image, and get it's outerHeight 
    //returns `null` if no image is found, wich then will be replaced with a 0 
    var imageHeight = $this.find('.related__item-image').outerHeight() || 0; 
    //same for the related title: 
    var titleHeight = $this.find('.related__item-title').outerHeight(true) || 0;  
    //btw, this would also work: 
    //var imageHeight = $('.related__item-image', this).outerHeight() || 0; 
    //and I mean `this` and not your cached `self`, but not your combination of find and self. 

    console.log($this.text()); 
    console.log(imageHeight > 0); 

    //inlined `calculate_with_image()` and `calculate_without_image()` because they are short, 
    //and almost identical, and need access to the same Nodes that are used 
    //comment: jQuery allows method-chaining 
    $this.find('.text') //get the textBlock 
     .height(containerHeight - (titleHeight + imageHeight)) //set it's height 
     .trigger("update.dot");  //and trigger 

    console.log(imageHeight > 0? "IMAGE": "TEXT"); 
}); 

有人可能會說，imageHeight > 0是不準確的，當測試是否有圖像或沒有。因爲可能有圖像，但高度爲0.是的，但對於這種計算，這沒有什麼區別。

圖像可能有問題，導致此高度爲0.也許它尚未加載，或者其中一個父母是display:none，但處理該問題將是另一個SO-Question的主題。

Answer 2

如果我理解正確的，這是因爲imageHeight變量calculate_with_image（）內部應該是部件的高度在循環中找到的特定圖像是否正確？

編輯：你有和正在使用的imageHeight變量只能用於找到的一個圖像。它不會根據您在循環中找到的內容進行更新。將循環中發現的高度或圖像傳遞到calculate_with_image（）（如下所述）可以解決問題。

如果是這樣的話，你想要麼通過在循環本身發現的元素calculate_with_image（），或高度，就像這樣：

// calculate_with_image function 
var calculate_with_image = function(element) { 
    var elementImageHeight = element.find('.related__item-image', self).outerHeight(); 
    var totalHeight = titleHeight + elementImageHeight; 
    textBlock.css({height: containerHeight - totalHeight}); 
    textBlock.trigger("update.dot"); 
}; 

// if statement found within your loop. 
if(hasImage === true){ 
    calculate_with_image(element); // option one, pass the element 
    console.log('IMAGE'); 
} // carry on with else if 

OR

// calculate_with_image function 
var calculate_with_image = function(elementImageHeight) { 
    var totalHeight = titleHeight + elementImageHeight; 
    textBlock.css({height: containerHeight - totalHeight}); 
    textBlock.trigger("update.dot"); 
}; 

// if statement found within your loop. 
if(hasImage === true){ 
    var elementImageHeight = element.find('.related__item-image', self).outerHeight(); 
    calculate_with_image(elementImageHeight); 
    console.log('IMAGE'); 
} // carry on with else if 

這樣，你的calculate_with_image將知道你想要處理的特定圖像的高度。這兩種方法都有效。這只是一個問題，你是否希望元素（找到特定的圖像）在函數中可用，或者只是你需要的高度。