top 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(); 

TO

$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]; 

而且，当你输入元素？