JQuery Klassennamen vergleichen

Ich bin mir nicht sicher, was ich falsch gemacht habe. Ich habe Klassen dynamisch Zeilen zugeordnet. Diese Klassen sind geordnet und eine Zeile kann dieselbe Klasse haben. Ich möchte alle Klassen mit mehreren gleichen Bezeichnern eine Farbe bestellen. Dann die nächste Reihe von Zahlen eine alternative Farbe, bevor Sie zurück zur ursprünglichen Farbe. Die letzte Zeile scheint jedoch immer zu versagen.JQuery Klassennamen vergleichen

<body> 
<table> 
<thead>Row</thead> 
<tbody> 
<tr class="a-1"><td>A1 row</td></tr> 
<tr class="a-2"><td>A2 row</td></tr> 
<tr class="a-2"><td>A2 row</td></tr> 
<tr class="a-2"><td>A2 row</td></tr> // should have class warning,but doesn't after js 
<tr class="a-3"><td>A3 row</td></tr> 
<tr class="a-4"><td>A4 row</td></tr> 
<tr class="a-4"><td>A4 row</td></tr> 
<tr class="a-4"><td>A4 row</td></tr> 
<tr class="a-4"><td>A4 row</td></tr> // should have class warning,but doesn't after js 
</tbody> 
</table> 
</body>

JQuery

var flag = true; 
$("table tr[class^='a-']").each(function(){ 
    var current = $(this); 
    if((current.attr("class") == current.next().attr("class")) || (current.attr("class") == current.prev().attr("class"))){ 
     if(flag){ 
      current.addClass("info"); 
     } else { 
      current.addClass("warning"); 
     } 
    } else { 
     if(flag){ 
      flag = false; 
     } else { 
      flag = true; 
     } 
    } 
});

machte ich eine jsfiddle mein Problem

Quelle

2016-11-01 Jonnny

welche werden Klasseninformationen haben? – DaniP

ja für die letzte Zeile funktioniert es nicht, denn bis zur letzten Zeile hat die vorherige Zeile eine Warnungsklasse und keine nächste Zeile – Geeky

Sie überprüfen nur mit attr ('class'), es gibt String von Klassennamen zurück – Geeky

$(function() { 
 
    var flag = true; 
 
    $("table tr[class^='a-']").each(function() { 
 
    
 
    var current = $(this); 
 
    var next = current.next(); 
 
    var prev = current.prev(); 
 

 
    var currentClassName = $(this).attr('class'); 
 
    // alert(currentClassName); 
 
    if(next.hasClass(currentClassName) || prev.hasClass(currentClassName)) 
 
    { 
 
     if(flag){ 
 
      current.addClass("info"); 
 
     } else { 
 
      current.addClass("warning"); 
 
     } 
 
    } 
 
    else { 
 
     if(flag){ 
 
      flag = false; 
 
     } else { 
 
      flag = true; 
 
     } 
 
    } 
 
    }); 
 
});

.info{background-color: blue;} 
 
.warning{background-color: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <table> 
 
    <thead>Row</thead> 
 
    <tbody> 
 
     <tr class="a-1"> 
 
     <td>A1 row</td> 
 
     </tr> 
 
     <tr class="a-2"> 
 
     <td>A2 row</td> 
 
     </tr> 
 
     <tr class="a-2"> 
 
     <td>A2 row</td> 
 
     </tr> 
 
     <tr class="a-2"> 
 
     <td>A2 row</td> 
 
     </tr>// should have class warning,but doesn't after js 
 
     <tr class="a-3"> 
 
     <td>A3 row</td> 
 
     </tr> 
 
     <tr class="a-4"> 
 
     <td>A4 row</td> 
 
     </tr> 
 
     <tr class="a-4"> 
 
     <td>A4 row</td> 
 
     </tr> 
 
     <tr class="a-4"> 
 
     <td>A4 row</td> 
 
     </tr> 
 
     <tr class="a-4"> 
 
     <td>A4 row</td> 
 
     </tr>// should have class warning,but doesn't after js 
 
    </tbody> 
 
    </table> 
 
</body>

Hoffnung zu zeigen, das hilft

Quelle

2016-11-01 15:08:13 Geeky

Dieser Teil der Bedingung wurde nie fullfiled:

(current.attr("class") == current.prev().attr("class")

, weil, wenn Sie hinzugefügt Klasse „Warnung“ oder „Info“, um es, so auch wenn sie die gleiche Klasse wie aktuelles Element enthalten, es zusätzliche Klasse und es ist nicht gleich. Also ist es besser, schreiben Sie so etwas:

var currClassName = "warning"; 
$("table tr[class^='a-']").each(function(){ 
    var current = $(this); 
    var currClass = current.attr("class"); 
    if((current.next().hasClass(currClass)) || current.prev().hasClass(currClass)){ 
     current.addClass(currClassName); 
    } 

    else { 
     currClassName = (currClassName == "info") ? "warning" : "info"; 
    } 
    });

Quelle

2016-11-01 16:04:21

JQuery Klassennamen vergleichen

Antwort

Verwandte Themen