在条件后聚焦到下一个输入…在 ul 列表中使用 jQuery。

huangapple go评论70阅读模式
英文:

Focus next input after condition....in ul list jquery

问题

我在这个网站上寻找类似的回答,但无法使我的代码工作。

我做错了什么?

我想在alert();后聚焦到下一个输入框

我知道我需要使用next()函数,但是...出于某种原因,我不明白它。

下面是可用的代码

  1. $(".insertWord input").on("input", function() {
  2. var matchWord = $(this).attr("title");
  3. if ($(this).val() === matchWord) {
  4. alert();
  5. $(this).closest('.insertWord input').next().focus();
  6. }
  7. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  2. <ul class='words'>
  3. <li class='insertWord'><input title='abc' /></li>
  4. <li class='insertWord'><input title='mnp' /></li>
  5. </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 -->

  1. $(&quot;.insertWord input&quot;).on(&quot;input&quot;, function() {
  2. var matchWord = $(this).attr(&quot;title&quot;);
  3. if ($(this).val() === matchWord) {
  4. alert();
  5. $(this).closest(&#39;.insertWord input&#39;).next().focus();
  6. }
  7. });

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;ul class=&#39;words&#39;&gt;
  3. &lt;li class=&#39;insertWord&#39;&gt;&lt;input title=&#39;abc&#39; /&gt;&lt;/li&gt;
  4. &lt;li class=&#39;insertWord&#39;&gt;&lt;input title=&#39;mnp&#39; /&gt;&lt;/li&gt;
  5. &lt;/ul&gt;

<!-- end snippet -->

答案1

得分: 1

通过使用.insertWord input,您只是选择了与最初相同的<input>

相反,您可以只使用.insertWord进行选择,或者使用.parent()方法来移动DOM。

  1. // 而不是
  2. $(this).closest('.insertWord input')
  3. // 使用
  4. $(this).closest('.insertWord')
  5. // 或者
  6. $(this).parent()

.next()无法遍历DOM的上下部分,只能向上,这就是为什么您无法以这种方式找到您的<input>的原因。

另外,一旦您移动到了下一个<li>,您将需要使用.find('input')来移动到<input>

  1. $(".insertWord input").on("input", function() {
  2. var matchWord = $(this).attr("title");
  3. if ($(this).val() === matchWord) {
  4. alert();
  5. $(this).closest('.insertWord').next().find('input').focus();
  6. }
  7. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  2. <ul class='words'>
  3. <li class='insertWord'>
  4. <input title='abc' />
  5. </li>
  6. <li class='insertWord'>
  7. <input title='mnp' />
  8. </li>
  9. </ul>
英文:

By using .insertWord input, you're just selecting the same &lt;input&gt; you were on originally.

Instead, you can select with just .insertWord, or use the .parent() method to move up the DOM

  1. // Instead of
  2. $(this).closest(&#39;.insertWord input&#39;)
  3. // Use
  4. $(this).closest(&#39;.insertWord&#39;)
  5. // Or
  6. $(this).parent()

.next() isn't able to traverse up and down the DOM; only up, which is why you weren't finding your &lt;input&gt; this way.

Also, once you moved to the next &lt;li&gt;, you'll have to use .find(&#39;input&#39;) to move down to the &lt;input&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(&quot;.insertWord input&quot;).on(&quot;input&quot;, function() {
  2. var matchWord = $(this).attr(&quot;title&quot;);
  3. if ($(this).val() === matchWord) {
  4. alert();
  5. $(this).closest(&#39;.insertWord&#39;).next().find(&#39;input&#39;).focus();
  6. }
  7. });

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;ul class=&#39;words&#39;&gt;
  3. &lt;li class=&#39;insertWord&#39;&gt;
  4. &lt;input title=&#39;abc&#39; /&gt;
  5. &lt;/li&gt;
  6. &lt;li class=&#39;insertWord&#39;&gt;
  7. &lt;input title=&#39;mnp&#39; /&gt;
  8. &lt;/li&gt;
  9. &lt;/ul&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月6日 02:21:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/59602899.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定