输入为焦点或填写时添加和删除父类

Question

当我的输入字段处于焦点或填写时，我已经创建了一个javascript函数来向父项添加和删除类。当我更新Wordpress时，这个功能在某种程度上肯定会破坏，但我不知道它有什么问题。

这是我的JavaScript：

$('.wpcf7-form-control').each(function() {
//console.log($(this));
$(this).on('focus', function() {
$(this).parent().parent().addClass('active');
});

$(this).on('blur', function() {
if ($(this).val().length == 0) {
$(this).parent().parent().removeClass('active');
}
});

if ($(this).val() != '') $(this).parent('.grid').addClass('active');

});

这是表单的HTML示例：

<div class="grid grid-3">
<span class="wpcf7-form-control-wrap firma">
<input type="text" name="firma" value="" size="40" class="wpcf7-form-control wpcf7-text" id="firma" aria-invalid="false">
</span>
<label for="firma">Firma</label>
</div>