Почему изменения в классах игнорируются после изменений dom?

Question

У меня есть ценовая сетка, которая использует относительное позиционирование для перемещения поля под полем с: overflow: hidden;.В этом поле есть поля с абсолютным позиционированием, содержащие цены.Когда этот блок наведен, соответствующие значения выше и слева от меняют цвет.Чтобы достичь этого, класс переключается с использованием jQuery.Это изначально работает.

Однако после перемещения сетки изменение класса больше не влияет на блок над сеткой.В консоли Chrome я вижу добавляемый класс, но его CSS-стилизация не применяется.Никакие другие стили для элемента не изменились.

Я на 100% уверен, что нет другого правила стиля, влияющего на элемент, он просто перестает реагировать на изменения в классе после изменения DOM.

Могу ли я "обновить"DOM как-нибудь?

Редактировать:

Я пытался получить только соответствующий код:

Добавление ячейки в первую очередь:

$("#price_dates_cells").append("<div id='"+weekday[theBeginDate.getDay()]+"-"+theBeginDate.getDate()+"-"+(theBeginDate.getMonth()-1)+"' class='datecell' style='left: "+( Math.floor( difference / ( 3600 * 24 * 1000) ) * ( cellwidth ) )+"px'>"+weekday[theBeginDate.getDay()]+"<br>"+theBeginDate.getDate()+" "+yearmonth[theBeginDate.getMonth()]+"</div>");

Переключите класс:

var str_element = "#"+weekday[Bdate.getDay()]+"-"+Bdate.getDate()+"-"+(Bdate.getMonth()-1);
$(str_element).toggleClass("red");

и движение, которое, кажется, вызывает проблему:

$('#price_grid').animate({"top": (( ( horizontalMovement ) * cellheight)) }, 'fast', 'linear');

Класс не применяется http://img708.imageshack.us/img708/6491/classnotapplied.png

Answer 1

CSS всегда дают priority last statement.Итак, если вы хотите переопределить ваш .datecell div color, напишите red class after, напишите так:

.datecell{
  background-color:grey;
}
.red{
 background-color:red
}

Это происходит в вашем случае

Но

, если вы не хотите red переопределить .datecell, напишите так:

.red{
     background-color:red
    }
.datecell{
      background-color:grey;
    }

Answer 2

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

jQuery логически добавляет класс только к первому элементу с указанным идентификатором, и, поскольку он был создан первым, он будет расположен под дубликатом.

Если бы только я подрезал скриншот немного по-другому, я уверен, что кто-то заметил бы: D

Спасибо всем за ваши ответы!