顶部div不会改变背景色。

Question

下面是我要做的:当我输入input字段时，我希望顶级div.container-fluid改变颜色。现在，我只能让.xdiv区域发生变化，但是没有比这更高的div。这是我的代码：

    <script>
    $(function () {
        $('input[type="text"]').keypress(function () { 
            var $this = $(this),
                $div = $(this).parent();
            if ($this.val().length > 0) {
                $div.addClass("hasContent");
            } else {
                $div.removeClass("hasContent");
            }
        });
    });
    </script>
    <style>
    .container-fluid.hasContent { background-color: red }
        </style>    

<div class="container-fluid linear-Algebra" id="{{id}}">        
    <div class="row-fluid">
        <div class="span12">                        
            <div class="row-fluid">                             
                <div class="span8 grid-layout"> 
                    <legend>Grid Layout:</legend>
                    <div class="span4">
                        <div class="xdiv">
                            <label>x:</label>                                   
                        </div>
                    </div>
                    <div class="span4 offset1">
                        <div class="ydiv">  
                            <label>y:</label>
                        </div>
                    </div> 
                </div>                          
                <div class="span3">
                    <legend>Options:</legend>
                    <div class="btngroup">
                        <label class="checkbox" class="cbl">
                        </label>
                    </div>
                    <label>Actions:</label> 
                    <div class="btngroup">
                    </div>
                </div>  
            </div>                                  
        </div>              
    </div>                              
</div>      

Answer 1

DEMO

改变这个

$div = $(this).parent();

至

$div = $(this).parents('.container-fluid');

parents('.container-fluid')找到具有类container-fluid的父类

Answer 2

你可以用jQuery.closest -

var containerDiv = $(this).closest('.container-fluid');

来自jquery最近的页面(http://goo.gl/tHBRx) -

描述:对于集合中的每个元素，通过测试元素本身并在DOM树中遍历其祖先，获得与选择器匹配的第一个元素。

Answer 3

改变这一点：

$div = $(this).parent();

对此：

$div = $('.container-fluid')[0];

另外，您的输入元素在哪里？