Обновление CSS onDomReady для вложенных флажков

Question

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

Вы можете увидеть ошибку здесь:

http://jsfiddle.net/Zfv7h/3/

$(document).ready(function() { 
    $(".content-finalized").each(function() { 
    if ($(this).attr("checked")) { 
    $(this).closest("li").css("text-decoration", "line-through"); 
    } 
    }); 
    $(".subchapter-finalized").each(function() { 
    if ($(this).attr("checked")) { 
     $(this).closest("li").css("text-decoration", "line-through"); 
    } 
    }); 
}); 

Спасибо за вашу помощь.

Answer 1

ОБНОВЛЕНО ОТВЕТ

Изменить свой Javascript для этого

$(document).ready(function() { 
    $("input.content-finalized:checkbox:checked").next('span').css("text-decoration", "line-through"); 
    $("input.subchapter-finalized:checkbox:checked").parent().css("text-decoration", "line-through"); 
}); 

мне пришлось немного изменить HTML-разметку. Все, что я сделал, это обернуть главу в. Вот почему. Когда я применил строку css, хотя и к родительскому <li>, она также применила ее к своим дочерним элементам, хотя я указал, что для элементов, отмеченных символом, не указано значение «text-decoration». Итак, теперь вместо того, чтобы применять его к родительскому <li>, я применяю его вместо <span>.

Here's an updated fiddle