英文:
Focus next input after condition....in ul list jquery
问题
我在这个网站上寻找类似的回答,但无法使我的代码工作。
我做错了什么?
我想在alert();
后聚焦到下一个输入框
我知道我需要使用next()
函数,但是...出于某种原因,我不明白它。
下面是可用的代码
$(".insertWord input").on("input", function() {
var matchWord = $(this).attr("title");
if ($(this).val() === matchWord) {
alert();
$(this).closest('.insertWord input').next().focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class='words'>
<li class='insertWord'><input title='abc' /></li>
<li class='insertWord'><input title='mnp' /></li>
</ul>
英文:
I was looking for similar responses on this site, but I wasn't able to make my code work.
What am I doing wrong?
I want to focus the next input after alert();
I know I need to use next()
function but...for some reason I don't get it.
working code below
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(".insertWord input").on("input", function() {
var matchWord = $(this).attr("title");
if ($(this).val() === matchWord) {
alert();
$(this).closest('.insertWord input').next().focus();
}
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class='words'>
<li class='insertWord'><input title='abc' /></li>
<li class='insertWord'><input title='mnp' /></li>
</ul>
<!-- end snippet -->
答案1
得分: 1
通过使用.insertWord input
,您只是选择了与最初相同的<input>
。
相反,您可以只使用.insertWord
进行选择,或者使用.parent()
方法来移动DOM。
// 而不是
$(this).closest('.insertWord input')
// 使用
$(this).closest('.insertWord')
// 或者
$(this).parent()
.next()
无法遍历DOM的上下部分,只能向上,这就是为什么您无法以这种方式找到您的<input>
的原因。
另外,一旦您移动到了下一个<li>
,您将需要使用.find('input')
来移动到<input>
。
$(".insertWord input").on("input", function() {
var matchWord = $(this).attr("title");
if ($(this).val() === matchWord) {
alert();
$(this).closest('.insertWord').next().find('input').focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class='words'>
<li class='insertWord'>
<input title='abc' />
</li>
<li class='insertWord'>
<input title='mnp' />
</li>
</ul>
英文:
By using .insertWord input
, you're just selecting the same <input>
you were on originally.
Instead, you can select with just .insertWord
, or use the .parent()
method to move up the DOM
// Instead of
$(this).closest('.insertWord input')
// Use
$(this).closest('.insertWord')
// Or
$(this).parent()
.next()
isn't able to traverse up and down the DOM; only up, which is why you weren't finding your <input>
this way.
Also, once you moved to the next <li>
, you'll have to use .find('input')
to move down to the <input>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(".insertWord input").on("input", function() {
var matchWord = $(this).attr("title");
if ($(this).val() === matchWord) {
alert();
$(this).closest('.insertWord').next().find('input').focus();
}
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class='words'>
<li class='insertWord'>
<input title='abc' />
</li>
<li class='insertWord'>
<input title='mnp' />
</li>
</ul>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论