Применение события jQuery для нескольких классов на странице

У меня есть страница с несколькими div, для которой я написал скрипт, чтобы соответствующим образом настроить его высоту. Каждый div содержит 2 divs в нем, а маленький скрипт записывается для вычисления самого высокого из этих 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

Вы здесь не поняли –

Вы можете использовать функцию обратного вызова, где вы У вас есть 'this' в вашем вызове jQuery, чтобы указать функцию, которая будет влиять на каждый выбранный элемент отдельно. Как вы вычисляете высоту индивидуально, зависит от вас. Пожалуйста, приготовьте скрипку, если вам нужна дополнительная помощь. –

Простите за то, что не ясны. У меня есть несколько разделов статей, высота которых должна быть скорректирована в зависимости от содержимого внутри него. На данный момент скрипт делает все статьи divs на странице одинаковой высоты, а не вычисляет каждую по отдельности. – 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 для нескольких классов на странице

ответ

Смежные вопросы