使用公共“类”名称过滤DOM中的元素并在其上应用CSS - 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.

在DOM中,我可以过滤出具有以特定单词开头的类名的元素,这里是answer_list_two cpts_,结果如下所示。

$('[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, compare the height of both the DIV elements and apply the larger height value to both the DIV elements. Please help me with the JQuery code for implementing the same. Thank you :)

从这里,我想取一个元素,找到它的类名,找到具有相同类名的另一个元素,比较两个DIV元素的高度,并将更大的高度值应用于两个DIV元素。请帮助我使用JQuery代码来实现相同的功能。谢谢 :)

3 个解决方案

#1

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

#2

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

#3

You would just do something like a comparison:

你会做一些像比较的事情:

function compareHeight($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){
    compareHeight($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 compare and set the heights the way you mentioned

我不确定你想用什么逻辑来获取元素,但是根据需要选择它们并将它们传递给你想要的那个函数,它应该按照你提到的方式进行比较和设置高度

#1

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;
})