Question

我正在尝试学习jQuery

我想要的是，当我徘徊一个孩子时，他会改变（在image中升起）父母的阶级（XI）。我相信一定是那样的 $（本）.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>

Answer 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

更多信息：

jQuery父（嵌套div）改变了类

1 个答案: