使用prev作为遥远的选择器 [英] Use prev for a distant selector

问题描述

我正在使用Zurb Foundation，这可能是为什么我遇到此问题的原因. 这是我的HTML代码:

I am using Zurb Foundation and it's probably why I am getting this issue. Here's my HTML code:

<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而无法正常工作.

I would like to add another class to the prefix span when I focus on the input. I tried the prev function, but it does not work because of the div in between.

这是我的jQuery代码:

Here's my jQuery code:

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

知道我能做什么吗?

非常感谢

推荐答案

1. 使用closest()
遍历整个容器
2. 使用find()
搜索范围

1. Traverse up to the overall container using closest()
2. Search for the span using 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>

这篇关于使用prev作为遥远的选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！