Jquery父类选择器

Question

我有这个 HTML

<label class="rlabel">First Name</label>    
<input class="rinput" type="text" placeholder="Fisrt Name" required />     
<label class="rlabel">Last Name</label>    
<input class="rinput" type="text" placeholder="Last Name" /> 

CSS

.rlabel{opacity:0;  }

Jquery的

$('.rinput').focus(function(){
        $(this).parent('.rlabel').css({'opacity':'1'});
        })

当我专注时，我想通过jquery制作这个类的“rlabel”这个类“rinput”opacity 1。

我尝试了以下内容：

$('.rinput').focus(function(){
        $(this).parents('.rlabel').css({'opacity':'1'});
        })

和

$('.rinput').focus(function(){
        $(this).parent('.rlabel').css({'opacity':'1'});
        })

和

$('.rinput').focus(function(){
        $(this).closest('.rlabel').css({'opacity':'1'});
        })

和

$('.rinput').focus(function(){
        $(this).parents().css({'opacity':'1'});
        })

Answer 1

此处的朋友是.prev()，因为label不是input的父元素

＆＃13;

＆＃13;

$('.rinput').focus(function() {
  $(this).prev('.rlabel').css({
    'opacity': '1'
  });
})

＆＃13;

.rlabel {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="rlabel">First Name</label>
<input class="rinput" type="text" placeholder="Fisrt Name" required />
<label class="rlabel">Last Name</label>
<input class="rinput" type="text" placeholder="Last Name" />

＆＃13;

＆＃13;

＆＃13;