无法访问父元素

Question

I figured out my previous question but now I'm trying to change the parent element. 我想出了上一个问题，但现在我想更改父元素。

$(document).ready(function() {
    var itemheight = 30;

    //When mouse rolls over
    $("li").mouseover(function() {
        var numitems = $(this).children().children().length;
        var newheight = numitems * itemheight + 18;
        $(this).stop().animate({
            height: newheight
        }, {
            queue: false,
            duration: 600,
            easing: 'swing'
        });
    });

    //When mouse is removed
    $("li").mouseout(function() {
        //change totalheight back to 18;
        $(this).stop().animate({
            height: '18px'
        }, {
            queue: false,
            duration: 600,
            easing: 'swing'
        });
    });

    //When mouse rolls over
    $("li ul li").mouseover(function() {
        $(this).stop().animate({
            height: 30
        });
        $(this).parent().parent().animate({
            backgroundColor: '#D52716'
        });
    });

    //When mouse is removed
    $("li ul li").mouseout(function() {
        $(this).stop().animate({
            height: '18px'
        }, {
            queue: false,
            duration: 600,
            easing: 'swing'
        })
    });

});

Question 1: What is the functional difference (if any) between using > and .children() ? 问题1：使用>和.children（）之间的功能区别（如果有）是什么？

The problem I'm having is with the third function. 我遇到的问题是第三个功能。 I cannot get the grandparent ie top level menu to change. 我无法更改祖父母（即顶层菜单）。 Ultimately I want to change its height but I'm playing with the background color to make it easier right now. 最终，我想更改其高度，但是现在我正在使用背景色来使其变得更容易。 Thing is that even if I change that line to 问题是，即使我将该行更改为

$(this).animate({backgroundColor:'#D52716'});

Nothing happens. 什么都没发生。 It's like it's not calling that function at all. 就像根本没有调用该函数一样。 Question 2: What am I doing wrong? 问题2：我做错了什么？

Here's my HTML 这是我的HTML

<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>Basic Menu System</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="menuanim.js"></script>
<link href="menujq.css" type="text/css" rel="stylesheet">
</HEAD>

<BODY>
<ul id=topmenu>
<li class="green">First item</li>
<li class="yellow">Second item
    <ul>
    <li>Submenu 
    <ul>
        <li>Tiertiary01</li>
        <li>Tiertiary02</li>        
        <li>Tiertiary03</li>
        </ul>
    </li>
    <li>Submenu2</li>
    </ul>
</li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>  <!-- End maincontent -->

</BODY>
</HTML>

And my CSS 还有我的CSS

/* Top menu with dropdowns */ / *带有下拉菜单的顶部菜单* /

#topmenu, #topmenu ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}


#topmenu li {
text-align:center;
overflow:hidden;
float: left;
font-size: 12px;
font-weight: bold;
border: 3px solid #A0A0A0;
width: 150px;
height: 18px;
padding: 3px;
color: #000000;
}


.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}
/****************************************************/

/* Second level */
#topmenu li ul {
display: none;
}

#topmenu li:hover > ul {
display: block;
position: relative;
left: -6px;
top: 7px;
}

#topmenu li ul li {     /* All attributes are inherited */
}

/*****************************************************/

Answer 1

The first question can be tested in a jsFiddle , the console output of which shows that functionally they act the same. 可以在jsFiddle中测试第一个问题，该结果在控制台输出中显示出它们在功能上相同。 If you're more used to using selectors compatible with both jQuery and CSS, you might choose the Child Selector ("parent > child") form over the .children convention. 如果您更习惯使用与jQuery和CSS都兼容的选择器，则可以选择.children约定上的Child Selector（“父> child”）形式。

Your second question can be answered with a quote straight from the jQuery.animate() docs : 您的第二个问题可以直接使用jQuery.animate() docs中的引号来回答：

All animated properties should be animated to a single numeric value, except as noted below; 除非另有说明，否则所有动画属性都应设置为单个数值。 most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width , height , or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). 大多数非数字属性不能使用基本的jQuery功能进行动画处理（例如，可以对width ， height或left进行动画处理，而不能对background-color进行动画处理，除非使用jQuery.Color()插件）。

In your example code, you haven't indicated that you've included the jQuery.Color() plugin, so that should be where your problem lies. 在示例代码中，您没有表示已包含jQuery.Color()插件，因此问题应该出在这里。

Answer 2

Question 1: 问题1：

Yeah, you can make child selections multiple ways, but one is easier to read than the other. 是的，您可以通过多种方式选择子项，但是一种选择比另一种更容易阅读。 .children() is more readable that .find('> *') , though they do the same thing. .find('> *') .children()比.find('> *')更具可读性，尽管它们执行相同的操作。

Question 2: 问题2：

esqew's answer is probably what you want. esqew的答案可能就是您想要的。 You also may want to consider using closest() instead of .parent().parent() - it makes the code more stable to DOM structure changes. 您可能还需要考虑使用closest()而不是.parent().parent() -它使代码对DOM结构更改更加稳定。

无法访问父元素

问题描述

2 个解决方案

解决方案1
0 2014-07-28 19:14:02

解决方案2
0 2014-07-28 19:20:03

Question 1: 问题1：

Question 2: 问题2：

无法访问父元素

问题描述

2 个解决方案

解决方案1 0 2014-07-28 19:14:02

解决方案2 0 2014-07-28 19:20:03

Question 1: 问题1：

Question 2: 问题2：

解决方案1
0 2014-07-28 19:14:02

解决方案2
0 2014-07-28 19:20:03