Javascript 将函数/样式应用于每个（）迭代

因此，我得到了一个for-each循环，该循环遍历每个“.related\uuuu项”，并检查它是否包含图像（使用“.related\uuu item-image”）。如果为true，请使用正确的函数计算每个“.related_uu”项的文本高度，并触发DottoDot函数

我的问题是，它正确地循环通过每个“.related__u项”，并根据图像记录正确的true或false。但出于某种原因，它为所有相关项目提供了相同的高度。所以我相信在if语句的某个地方，有些地方出了问题，但我就是不知道到底是什么

如何使循环在每次迭代中都给出一个真或假，为所有元素设置正确的高度，然后继续执行下一步并执行相同的操作。我是不是想在每个人身上做一个

Jfiddle：

或

JS:

var self=this；
var textBlock=$（'.text'，self）；
var titlehight=$（'.related_uuitem-title'，self）.outerhight（true）；
var containerHeight=$（'.related__item'，self）.outerHeight（）；
var imageHeight=$（'.related__item-image'，self）.outerHeight（）；
var relatedItems=$（“.related杂志.related项目”）；
使用函数（）计算变量{
var totalHeight=滴定光+图像高度；
css（{height:containerHeight-totalHeight}）；
textBlock.trigger（“update.dot”）；
};
var计算不带图像的图像=函数（）{
css（{height:containerHeight-titleHeight}）；
textBlock.trigger（“update.dot”）；
};
变量相关_resize=函数（）{
对于（变量i=0；i

HTML：（剥离）

相关页面

如果我理解正确，这是因为calculate_with_image（）中的imageHeight变量应该是循环中找到的特定图像的高度，对吗

编辑：您拥有并正在使用的imageHeight变量将仅用于找到的一张图像。它不会根据您在循环中发现的内容进行更新。将在循环中找到的高度或图像传递到calculate_with_image（）（如下所述）可以解决此问题

如果是这种情况，您可能希望传入在循环本身中找到的元素，以使用_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

或

---

这样，使用图像计算图像将知道要处理的特定图像的高度。这两种方法都有效。这只是一个您希望元素（找到的特定图像）在函数中可用的问题，还是您需要的高度的问题。

如果我理解正确，这是因为calculate\u with\u image（）中的imageHeight变量应该是循环中找到的特定图像的高度正确吗

编辑：您拥有并正在使用的imageHeight变量将仅用于找到的一张图像。它不会根据您在循环中发现的内容进行更新。将在循环中找到的高度或图像传递到calculate_with_image（）（如下所述）可以解决此问题

如果是这种情况，您可能希望传入在循环本身中找到的元素，以使用_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

或

这样，使用图像计算图像将知道要处理的特定图像的高度。这两种方法都有效。这只是一个问题，你是否希望元素（找到的特定图像）在函数中可用，或者只是你需要的高度

好的，我已经剥离了整个HTML结构，让您了解它的外观

Thanx，这真的很有帮助。代码中的问题是：<代码>计算器和IMAGE（）/<代码>和<代码>计算器OutOutIMAGE（）/<代码>不要考虑当前<代码>。这些函数中使用的所有值都是在循环之前计算的。这就是为什么每次迭代返回相同的值

注释：大多数计算/返回值且不对jQuery选择中的节点应用某些内容的jQuery方法，从选择中的第一个DOM节点计算该值。因此，

$（'.related\u item-image'）.outerHeight（）

首先从文档中获取所有

.related\u item-image

节点，但仅返回第一个节点的

outerHeight（）

这是代码中出错的一件事

我不确定这是否是您的意图，但我认为您尝试先获取所有相关节点，然后迭代这些列表（我的意思是这部分：

var textBlock=$（'.text'）

和以下几行）。如果这些列表之间存在1:1的关系，则可以（不好，但可以）。否则，你将以一团糟告终；因此，如果可能，一般避免这种方法。很容易出问题。或者可能会改变，然后出错
如果我误解了你的意图，没关系

我无法测试以下代码是否会产生预期的结果，因为这取决于您的CSS，但我认为它应该可以完成这项工作：（否则，您会告诉我出了什么问题）

当测试是否有图像或n时，有人可能会认为

imageHeight>0

不准确

// 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

// 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

$(".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");
});