Question

我正在使用Zurb基金会，这可能就是我遇到这个问题的原因。这是我的HTML代码：

<div class="row collapse">
    <label for="">Login</label>
    <div class="large-1 medium-1 small-2 columns">
        <span class="prefix"><i class="fa fa-user"></i></span>
    </div>
    <div class="large-11 medium-11 small-10 columns">
        <input type="text" />
    </div>
</div>

当我专注于输入时，我想在前缀span中添加另一个类。我尝试了prev函数，但由于它们之间存在div，所以它不起作用。

这是我的jQuery代码：

$('input').focus(function() {
    $(this).prev('.prefix').addClass('prefix-focus');
});

知道我能做什么吗？

非常感谢

Answer 1

使用closest()
使用find()

$('input').focus(function() {
  $(this).closest('.row').find('.prefix').addClass('prefix-focus');
});

.prefix-focus {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row collapse">
  <label for="">Login</label>
  <div class="large-1 medium-1 small-2 columns">
    <span class="prefix"><i class="fa fa-user">in prefix</i></span>
  </div>
  <div class="large-11 medium-11 small-10 columns">
    <input type="text" />
  </div>
</div>

Answer 2

您也可以直接访问yAxis: { title: { text:'here is Y Axis title', } }, xAxis: { title: { text:'here is X Axis title', } }

span

$('input').focus(function() {
  $('span.prefix').addClass('prefix-focus');
});

.prefix-focus {
  color: #F89A0C;
}

使用prev作为远程选择器

2 个答案: