2015-05-27 9 views
6

In einem DOM könnte ich Elemente mit Klassennamen beginnend mit einem bestimmten Wort ausfiltern, hier ist es answer_list_two cpts_ und das Ergebnis ist unten angegeben.Filter Elemente in einem DOM mit gemeinsamen 'Klasse' Namen und wenden Sie CSS darauf an - JQuery

$('[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>​]

von diesem, würde Ich mag ein Element nehmen, seine class name finden, findet ein anderes Element mit gleichen Klassennamen, vergleichen Sie die height sowohl die DIV-Elemente und wenden Sie die größere Höhe Wert für beide DIV-Elemente. Bitte helfen Sie mir mit dem JQuery-Code zur Implementierung derselben. Danke :)

Antwort

4

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 Versuchen: Fiddle

1

Sie würden so etwas wie ein Vergleich nur tun:

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

Ich bin nicht sicher, welche Logik, die Sie verwenden möchten, um die Elemente zu bekommen, aber wählen sie, wie Sie wollen und geben sie in diese Funktion aber wie Sie wollen und es sollte vergleichen und setzen Sie die Höhen, wie Sie erwähnt

2

Nehmen Sie dies als Start (nicht geprüft), lassen Sie mich jetzt, wenn ich etwas ändern sollte.

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