Question

我有以下bootstrap 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();
})

N.B。正如有人提到的那样，你的问题可能意味着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 vs .parrent仅对您的html结构有影响。输入总是在datepicker之前吗？在datepicker的父元素中是否始终只有一个输入从外人的角度来看，前者似乎比后者更好。

Answer 3

假设你的输入标签：

始终有class＆＃39; datepicker-input＆＃39;
始终在使用插件按钮

您可以使用以下代码：

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

使用jQuery在span之前设置Focus on input

3 个答案: