英文:
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论