Question

我已经通过一个按钮动态创建了输入，一次创建了两个，我希望每次添加一组时都将焦点放在两个中的第一个上，因此从理论上讲它将始终是第二个输入

我目前使用$('input:text:visible:first').focus();，但是有办法做到这一点，但倒数第二吗？

Input1.1
Input1.2

Input2.1
Input2.2

# user creates new input set via button

Input3.1 <---Focus on this one
Input3.2

Answer 1

一种解决方案是使用eq(-2).focus();（eq() documentation）。从那里您可以看到该参数可以是代表下一个参数的负数：

indexFromEnd /类型：整数/一个整数，指示元素的位置，从集合中的最后一个元素开始倒计数。

我举了一个简单的例子来说明他的用法：

$("#myBtn").click(function()
{
    $('<input value="new">').appendTo(".wrapper");
    $('<input value="new">').appendTo(".wrapper");
    $(".wrapper input").eq(-2).focus();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <input type="text" value="input1">
  <input type="text" value="input2">
  <input type="text" value="input3">
  <input type="text" value="input4">
</div>
<button id="myBtn">ADD</button>

Answer 2

您可以使用class，其中n是任意数字

input:nth-last-child(n)

function createInput() {
  let str = `<div class ='ipCon'>
               <input type='text'>
               <input type='text'>
               <input type='text'>
             </div>`;
  document.getElementById('con').innerHTML = str;
  document.getElementsByClassName('ipCon')[0].querySelector('input:nth-last-child(2)').focus()
}

input:focus {
  background-color: yellow;
}

将.focus设置为倒数第二个输入，而不是第一个或最后一个

2 个答案: