以具有相同類 jquery 的特定元素為目標

Question

這是高級別的代碼，我有多個這樣的列表，結構如下：

<li class="wrap-input">
    <p>Some sentence</p>
    <select class="form-control">
      ...
    </select>
    <div class="button-in-input">
      ...
    </div>                                        
</li>
.
.
.

我想要做的是，每當用戶關注“表單控制”select 時，應該顯示帶有“輸入按鈕”class 的 div，但僅在那個特定的 li 元素中。 我用這個 jquery 代碼試了一下：

$(".form-control").focusin(function() {
        $(".button-in-input").show();
    }).focusout(function() {
        $(".button-in-input").hide();
    });

但是，當然，這可以推廣到我擁有的所有 li 元素。 我假設有一種方法可以使用this關鍵字，但請注意 select 和 div 元素是兄弟元素。
任何幫助，將不勝感激！

PS：我想避免使用 ID，否則會有大量重復代碼

Answer 1

你可以用純 CSS 做到這一點。

.wrap-input .button-in-input {
    display: none;
}
.wrap-input select.form-control:focus + .button-in-input {
    disply: block;
}

第二個選擇器中的select不是必需的，但如果存在具有相同 class 的不同項目，它會有所幫助。

Answer 2

你可以簡單地在 css 中使用:focus來做到這一點，不需要花哨的 javascript 代碼

.form-control:focus + .button-in-input {
    display: block;
}