JQuery сравнить имена классов

Я не уверен, что я сделал неправильно в этом. Я назначил классы динамически для строк. Эти классы упорядочены, а строка может иметь один и тот же класс. Я хочу заказать все классы с несколькими одинаковыми идентификаторами одного цвета. Затем следующий набор чисел - альтернативный цвет, прежде чем вернуться к исходному цвету. Последняя строка всегда, кажется, терпит неудачу.JQuery сравнить имена классов

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

Я сделал jsfiddle, чтобы показать мою проблему

источник

2016-11-01 Jonnny

у кого будет информация о классе? – DaniP

да для последней строки это не сработает, потому что к тому времени, когда речь заходит о последней строке, в предыдущей строке есть класс предупреждения, и у нее нет следующей строки – Geeky

, которую вы просто проверяете с помощью attr ('class'), она возвращает строку классов – 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>

Надеется, что это помогает

источник

2016-11-01 15:08:13 Geeky

Эта часть условия никогда не fullfiled:

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

, потому что, когда вы добавили класс «предупреждение» или «информация» к нему, так что даже если он содержит один и тот же класс, как текущий элемент, он имеет дополнительный класс и это не равно. Так что лучше, напишите примерно так:

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

источник

2016-11-01 16:04:21

JQuery сравнить имена классов

ответ

Смежные вопросы