使用 prev 作为远程选择器答案

【问题标题】：Use prev for a distant selector使用 prev 作为远程选择器
【发布时间】：2015-07-11 12:36:59
【问题描述】：

我正在使用 Zurb Foundation，这可能就是我遇到此问题的原因。这是我的 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>

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

这是我的 jQuery 代码：

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

知道我能做什么吗？

非常感谢

【问题讨论】：

如果答案不起作用或您仍然面临问题，请告诉我，以便我提供帮助
感谢 Ammar，这非常有效。我现在有另一个问题，但我会创建另一个主题。最亲近的胜过父母。

标签： jquery

【解决方案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>

【讨论】：

【解决方案2】：

你也可以像这样直接访问span

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

.prefix-focus {
  color: #F89A0C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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">TextColor</i></span>
    </div>
    <div class="large-11 medium-11 small-10 columns">
        <input type="text" />
    </div>
</div>

【讨论】：