2012-07-03 5 views
2

스타일 상위 상위를 원하며 동적이어야합니다. 스타일 상위 부모를 원해. 우리는 더 많은 부모 div를 추가 할 수 있지만 스타일은 div를 반영해야합니다. jquery로 가능합니다.jquery를 사용하여 상위 상위 요소의 스타일을 지정하는 방법

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript"> 

$(function(){ 
    $('.text').parent().css('background-color','red') 
}) 

</script> 
</head> 
<body> 

<div> 
    <div> 
     <div class="menu"> 
      <div class="text">hiiii</div> 
     </div> 
    </div> 
</div> 

</body> 
+2

'상위 상위'에 대한 정의는 무엇입니까? – jfriend00

답변

4

당신이 무슨 뜻인지에 따라 "정상 부모,"당신은 선택 "div"으로 parents 기능을 할 수 있습니다 : $('.text')는 하나 개의 요소를 일치하는 경우 예상대로에만 동작

$(function(){ 
    $('.text').parents("div").last().css('background-color','red'); 
}); 

참고. 더 이상 일치하면, 당신은 빨간색으로 각각 일치 .text의 "상단 부모"를 설정하는 루프, 예컨대 :

$(function(){ 
    $('.text').each(function() { 
     $(this).parents("div").last().css('background-color','red'); 
    }); 
}); 

을 ...해야합니다.

0

아래처럼 할 수있는 :

$('.text').parents('div:last').css('background-color','red')​; 

.parents() 가장 바깥 쪽 부모를 얻기 위해 선택 당신이 할 수 있도록 플러스 :last, 외부에 내부 양식을 위해 조상을 반환합니다.

0

현재 선택한 요소의 최상위 요소를 원한다고 생각합니다. .parents()을 사용하면 bodyhtml까지 div의 부모를 모두 얻을 수 있습니다. 내가 bodyhtml (즉 -2 그리고 배열이 너무 다른 빼기 기반 0)을 포함하고 있지 않다 때문에

$(".text").parents() 
[ 
<div class=​"menu" style=​"background-color:​ red;​ ">​…​</div>​, 
<div>​…​</div>​, 
<div>​…​</div>​, 
<body>​…​</body>​, 
<html>​…​</html>​ 
] 

parents = $(".text").parents(); 
var rootElement = $(parents[parents.length-3]) 

나는 -3을한다. 이 빼기를 수행 할 수 없으며 .parents("div")과 같은 선택기를 지정하고 마지막 하나만 가져옵니다. 루트 요소가 어떤 요소인지 알아야합니다.

관련 문제