Javascript 以具有相同类jquery的特定元素为目标

这是一个高层次的代码，我有以下结构的多个这样的列表：

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

当然，这也适用于我所有的li元素。我假设有一种方法可以使用this关键字来实现，但是请注意select和div元素是同级的。
任何帮助都将不胜感激

---

PS：我想避免使用ID，否则会有大量重复代码

你可以用纯CSS来实现这一点

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

---

第二个选择器中的选择是不必要的，但它有助于防止同一类中有不同的项。

您只需在css中使用

：focus

即可，无需使用花哨的javascript代码

.form控件：输入中的焦点+.按钮{
显示：块；
}

因此，我在“输入中的按钮”元素中添加了一个onClick事件，但在您的代码中，发生的情况是，当我单击该元素时，在可以注册单击事件之前，输入似乎失去了焦点。你知道我如何解决这个问题吗？根据你的原始代码，当选择处于焦点时，显示输入div，当焦点离开选择时，隐藏输入按钮。如果您希望输入按钮在选择不再处于焦点后仍保持可见，您应该在问题中说明这一点。现在我们不知道这是你的意图。所以我在“button in input”元素中添加了一个onClick事件，但是在你的代码中，发生的事情是，当我单击元素时，在可以注册click事件之前，输入似乎失去了焦点。你知道我该怎么解决这个问题吗？

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