IE8 및 jQuery 선택기

Question

오늘 jQuery 선택기와 addClass() 함수의 조합이 IE8에서 제대로 작동하지 않는다는 사실을 알게되었습니다.

jQuery(document).ready(function($){ 
    $("#table1 tr:nth-child(even)").addClass("even"); 
} 

을 그리고 CSS, 나는 썼다 : 나는 짝수 행이 테이블에 선택되어 있는지 확인하고자 할 때

예를 들어, 내가 쓴

#table1 tr:nth-child(even), #table1 tr.even { 
    background-color: #ff0; 
} 

를 파이어 폭스에서 , Chrome, Safari 및 Opera는 CSS 파일의 의사 클래스 선택기가 없어도 짝수 행이 선택됩니다. 그러나 IE8에서는 그렇지 않습니다. 행의 배경색이 다릅니다. 내가 사용하는 경우 때문에

이 이상해 :

jQuery(document).ready(function($){ 
    $("#table1 tr:nth-child(even)").css({"background-color":"#ff0"}); 
} 

선택한 행은 IE8으로 강조 표시됩니다.

---

문제의 예는 질문은 여기에서 볼 수있다 - 24ways example. Firefox, Chrome, Safari 및 Opera에서 홀수 행에는 "이상한"클래스가 할당됩니다. 그러나 IE8에서는 "이상한"클래스가 지정되지 않고 강조 표시되지 않습니다.

Answer 1

셀렉터는 jQuery를 측면에서 제대로 작동 ...하지만 nth-child 인식하지 못하기 때문에 IE8은 (the specification 준수) 완전히 스타일 규칙을 삭제합니다 : 당신이 그것을 분할하는 경우

tr:nth-child(odd) td, tr.odd td { 
    background-color: #86B486; 
} 

를, 그것은 ' 제대로 LL 작업 :

tr:nth-child(odd) td { 
    background-color: #86B486; 
} 
tr.odd td { 
    background-color: #86B486; 
} 

Here's the original version (단일 IE8을 제거 규칙) 및 here's a fixed sample, 규칙 분할과 함께. 규칙 like this을 반전 완성도를 위해서

---

는 도움이되지 않습니다 :이 IE8 및 IE9에서 나를 위해 작동

tr.odd td, tr:nth-child(odd) td { 
    background-color: #86B486; 
} 

Answer 2

가 먼저 배경 컬러와 2 개 클래스 필요를

.even { background-color: white; } 
.odd { background-color: #ff0; } 

다음으로 jquery find tr : odd add tr : even을 추가하고 해당 클래스를 추가하십시오.

$(document).ready(function() { 
     $('#table1').find('tr:odd').addClass("odd"); 
     $('#table1').find('tr:even').addClass("even"); 
});