javascript - Filter elements in a DOM with common 'class' name and apply CSS on it - JQuery

In a DOM, I could filter out elements having class names starting with a particular word, here it is answer_list_two cpts_ and the result is given below.

$('[class^="answer_list_two cpts_"]') =>

[<div class="answer_list_two cpts_1_19234">…</div>, <div class="answer_list_two cpts_2_19234">…</div>, <div class="answer_list_two cpts_3_19234">…</div>, <div class="answer_list_two cpts_4_19234">…</div>, <div class="answer_list_two cpts_5_19234">…</div>, <div class="answer_list_two cpts_1_19234">…</div>, <div class="answer_list_two cpts_2_19234">…</div>, <div class="answer_list_two cpts_3_19234">…</div>, <div class="answer_list_two cpts_4_19234">…</div>, <div class="answer_list_two cpts_5_19234">…</div>, <div class="answer_list_two cpts_1_19235">…</div>, <div class="answer_list_two cpts_2_19235">…</div>, <div class="answer_list_two cpts_3_19235">…</div>, <div class="answer_list_two cpts_1_19235">…</div>, <div class="answer_list_two cpts_2_19235">…</div>, <div class="answer_list_two cpts_3_19235">…</div>]

from this, I would like to take an element, find its class name, find another element having same class name, pare the height of both the DIV elements and apply the larger height value to both the DIV elements.

How can I write the jQuery code for implementing the same?

In a DOM, I could filter out elements having class names starting with a particular word, here it is answer_list_two cpts_ and the result is given below.

$('[class^="answer_list_two cpts_"]') =>

How can I write the jQuery code for implementing the same?

Share Improve this question edited Apr 28, 2024 at 17:22 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked May 27, 2015 at 3:40 Rajesh Omanakuttan 6,9287 gold badges50 silver badges87 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

Try

var filtered = {}, $els = $('.answer_list_two[class*="cpts_"]');
$els.each(function () {
    var clazz = this.className.match(/cpts_\d+_\d+/)[0];
    if (filtered[clazz]) {
        return;
    }

    var height = 0;
    $els.filter('.' + clazz).each(function () {
        var h = $(this).height();
        if (height < h) {
            height = h;
        }
    }).height(height);
    filtered[clazz] = true;
})

Demo: Fiddle

Take this as start (unproved), let me now if I should change something.

var classs;
$('[class^="answer_list_two cpts_"]').each(function(index, val) {
    classs = val.attr('class');
    $('.'+classs).each(function(index2, val2) {
        if(val.height() > val2.height()){
            val2.css('height', val.height());
        } else {
            val.css('height', val2.height())
        }
    });
});

You would just do something like a parison:

function pareHeight($el, $el2){
    var h1 = $el.height();
    var h2 = $el2.height();
    var h = h1 > h2 ? h1 : h2

    $el.css('height', h);
    $el2.css('height', h);
}

var $items = $('.class');

if($items.length > 1){
    pareHeight($items.eq(0), $items.eq(1));
}

I'm not sure what logic you want to use to get the elements, but select them however you want and pass them into that function however you want and it should pare and set the heights the way you mentioned

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Filter elements in a DOM with common 'class' name and apply CSS on it - JQuery - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)