使用jQuery在跨度之前将焦点设置为输入

Question

我有以下引导HTML：

<div class="input-group">                                                    
    <input id="dbTest" class="input-sm input-s datepicker-input form-control dirty" type="text" data-bind="datepicker:DOB" data-date-format="dd-mm-yyyy" readonly="readonly">                                                   
    <span class="input-group-addon" id="dp3"><i class="fa fa-calendar"></i></span>
</div> 

数据绑定是一个敲除扩展，可以很好地工作，当焦点位于输入上时，所有日期选择器都可以使用。 我为此创建了一个测试，如下所示：

$("#dp3").click(function () {
   $("#dbTest").focus();
});

我要实现的是能够为我创建的任何其他日期选择器的插件按钮创建全局功能，这样我就不必为我创建的每个日期选择器添加id和功能。 例如，我想添加一个称为datepicker-addon的类：

<span class="input-group-addon datepicker-addon" id="dp3"><i class="fa fa-calendar"></i></span>

然后执行以下操作：

$(".datepicker-addon").each(function() {
    $(relevant input).Focus();
});

关于如何获取相关输入元素的任何想法？

Answer 1

不确定我是否完全理解，但是如果您想将重点放在没有id等的输入上，则可以使用标记，可以使用

$(".datepicker-addon").each(function() {
    $(this).parent().find('input').Focus();
})

注意，正如有人提到的那样，在您的问题中可能指的是click() ，而不是each() ，在这种情况下

$(".datepicker-addon").on('click', function() {
    $(this).parent().find('input').Focus();
})

是你想要的。

Answer 2

如果span和input彼此相邻，我将使用jquery .prev（）函数而不是parent，然后查找。
http://api.jquery.com/prev/

$(".datepicker-addon").each(function() {
   $(this).prev().Focus();
})

.prev在当前元素之前立即查看html elemnet。

.prev与.parrent仅在您的html结构上很重要。 输入是否总是在日期选择器之前？ 从外部人的角度来看，日期选择器的父元素内总是只有一个输入。前者似乎比后者更好。

Answer 3

假设您的输入标签为：

• 总是有类'datepicker-input'
• 总是在带有附加按钮的范围之前出现

您可以使用以下代码：

$('.input-group-addon').click(function(){
    $(this).prev('.datepicker-input').focus();
});