使用通用的“类”名称过滤DOM中的元素并在其上应用CSS - JQuery

Question

在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>​]

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

Answer 1

尝试

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

演示： 小提琴

Answer 2

把它作为开始（未经证实），如果我应该改变一些东西，现在就告诉我。

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

Answer 3

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

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

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