2010-08-02 45 views
1

我想学习jQueryjQuery的父母(嵌套的div)改变类

我想,当我将鼠标悬停一个孩子,他改变了(玫瑰在image) 类的家长(十一)。我相信一定是这样的 $(this).parent()。addClass(“XI”);

您可以复制并保存它的jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>PAPOU VERTICAL</title> 
    <link rel="stylesheet" type="text/css" media="all" href="papouVER.css" /> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("div[class$='OO']").hover(function(){ 
     $(this).toggleClass("OI"); 
     $(this).children().toggleClass("OI"); 
     $(this).children().hover(function(){ 
     $(this).toggleClass("OI"); 
     });});}); 
    </script> 
    <style> 
body{margin:0;padding:0;background:#FFF url(images/stripe.png);} 
.pages { position:absolute;float:left;float:left;z-index:-1000;} 
.pagesbis{ float:left;float:left;z-index:-1000;} 
.papa {position:absolute;width:100%;border-bottom:1px solid #aaa;color:#777;background-color:#FEFEFE;-moz-box-shadow: 0 5px 5px -2px #CDCDCD; -webkit-box-shadow: 0 3px 5px #AAA;} 
.papa-OO{ position:relative;float:left;float:left;width:auto;} 
.maison-OO{ position:absolute;display:none;z-index:-50;} 
.maison-OO.OI{ display:block;-moz-box-shadow: 0 3px 5px #AAA; 
-webkit-box-shadow: 0 3px 5px #AAA;} 
.nurse-OO{ z-index:90;width:auto;position:absolute;left:100%;top:0;display:none;} 
.nurse-OO.OI{ display:block;-moz-box-shadow: 0 3px 5px #AAA; -webkit-box-shadow: 0 3px 5px #AAA;} 
.filscache-OO{ position:relative;} 
.papa-OO a { display:block;padding:0.7em;color:#777;background-color:#FEFEFE;font-size:0.7em;font-weight:bold;text-decoration:none;white-space:nowrap;} 
.papa-OO a:hover { display:block;color:#222;background:#CCC;} 
.OI.XI { display:block;color:#222;background:#DDD;} 
    </style> 
</head> 
<body> 
<div class="papa"> 
<div class="papa-OO"> 
<a href="#">L'autre papounet et ses lardons</a> 
<div class="maison-OO"> 
        <div class="filscache-OO"> 
         <a href="#">Un autre fils gardé par sa nurse…</a> 
        </div> 

    <div class="filscache-OO"> 
     <a href="#">Un fils gardé par sa nurse</a> 
     <div class="nurse-OO"> 

      <div class="filscache-OO"> 
       <a href="#">Un autre fils gardé par sa nurse…</a> 
      </div> 

      <div class="filscache-OO"> 
       <a href="#">Un fils avec un seul copain</a> 
       <div class="nurse-OO"> 
        <div class="filscache-OO"> 
         <a href="#">Un autre fils gardé par sa nurse…</a> 
        </div> 
       </div> 
      </div> 
       <div class="filscache-OO"> 
        <a href="#">Un autre fils gardé par sa nurse…</a> 
       </div> 
     </div> 
    </div> 
</div> 
</div> 
</div> 
<div class="pages"> 
Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br /> 
</div> 
</body> 
</html> 
+0

如果我理解正确的话,那么'$(本).parent()addClass( “XI”)'是正确。你没有试过吗? – 2010-08-02 18:40:35

+0

我试图从昨天;)但我无法看到我在做什么错误。无论如何,我想感谢你们为我找到的最快速答案(也为了精神)。)。我会再次阅读父母,父母和最亲密的。但我认为问题不在那里。这就是为什么我显示所有的代码。 – speciale 2010-08-02 19:01:56

+0

你能更好地描述当你将鼠标悬停在哪个元素上时会发生什么?请举个具体的例子。 – 2010-08-02 19:41:35

回答

1

附近是的,你可以这样做:

$(this).parent(' #id or .class ').addClass("XI"); // one level up 

或者

$(this).closest(' #id or .class ').addClass("XI"); // search up until found 

或者

$(this).parents(' #id or .class ').addClass("XI"); // search up until found 

更多信息:

+0

谢谢;)我会尽快看到 – speciale 2010-08-02 19:09:42

+0

@speciale:不客气... – Sarfraz 2010-08-02 19:17:02