将jQuery事件应用于页面上的多个类

我有一个带有几个div的页面，为此我编写了一个脚本来适当调整它的高度。每个div包含2个div，并编写一个小脚本来计算这些div的最高值并将它们正确排列。问题是现在页面上的所有div都被赋予相同的高度。我希望它为每个div分别计算。将jQuery事件应用于页面上的多个类

HTML

<article> 
    <div class="inner-content-container equalHeight"> 
     some text.... 
    </div> 
    <div class="entry-sidebar equalHeight"> some text...</div> 
    </article> 
    <article> 
    <div class="inner-content-container equalHeight"> 
     some text.... 
    </div> 
    <div class="entry-sidebar equalHeight"> some text...</div> 
    </article> 
    <article> 
    <div class="inner-content-container equalHeight"> 
     some text.... 
    </div> 
    <div class="entry-sidebar equalHeight"> some text...</div> 
    </article>

jQuery的

var highestCol2 = Math.max(jQuery('.entry-sidebar').height(),jQuery('.inner-content-container').height()); 
    jQuery('.equalHeight', this).height(highestCol2);

来源

2014-07-02 MG1

中的工作示例 –

您可以使用回调函数在您的jQuery调用中已经获得了'this'来指定一个函数，它将单独影响每个选定的元素。你如何分别计算高度取决于你。如果您需要更多帮助，请提供小提琴。 –

对不起，不清楚。我有多个文章divs的高度需要根据其中的内容进行调整。目前，该脚本使页面上的所有文章div都具有相同的高度，而不是单独计算每个div。 – MG1

您可以使用.each()函数获取每篇文章的回调，并使用.children()查找当前文章内仅元素，并使用它像这样

$('article').each(function() { 
    var $article = $(this); 
    var highestCol = Math.max($article.children('.entry-sidebar').height(),$article.children('.inner-content-container').height()); 
    $article.children('.equalHeight').height(highestCol); 
});

这里的在FIDDLE

来源

2014-07-02 03:12:47 Kyojimaru

这是因为使用作为height()的吸气剂的方法上的一组元件将返回在列表中的第一个元件的高度。

所以尽量

jQuery('article').height(function (i, height) { 
    return Math.max(jQuery(this).find('.entry-sidebar').height(), jQuery(this).find('.inner-content-container').height()); 
})

来源

2014-07-02 03:07:41

将jQuery事件应用于页面上的多个类

回答

相关问题