jquery - 查找单词旁边的输入框

Question

我有一个表格...

<form id='form1'>
   First Name:
   <input type="text"> 
</form>

我希望能够找到单词First Name，然后查找以下输入并添加值“Joe”。名称周围可能有标签标签，输入周围也可能有 div/span 标签。以上只是一个基本的例子。

我的代码看起来像这样，但当然不能正常运行。谢谢。

$('#form1').text($(this).find('First Name').next().val('Joe')); 

Answer 1

在 HTML 中关联标签和输入的传统方法是使用<label>标签：

<form id='form1'>
    <label for='firstName'>First Name</label>
    <input type='text' name='firstName' id='firstName'/>
</form>

标签for通过 ID 与输入相关联，因此要从标签中选择输入，您可以执行以下操作：

document.getElementById($('label[innerHTML="First Name"]').get(0).htmlFor).value += Joe;

或者只使用输入的 id：

document.getElementById('firstName').value += 'Joe';

Answer 2

jQuery 不是用来选择文本的，它是用来选择元素的。例如，如果您命名您的输入first_name，您可以直接选择输入

$("input[name=first_name]", "#form1")

当输入必须具有名称 id 或类以供 html 页面以任何有用的方式使用时，绝对没有理由根据其前面的文本选择输入。

Answer 3

jsBin 演示

Simle：使用.eq()( 或:eq())
我想在表单中您想要的输入将是（例如）第一个，对：

<form id='form1'>  
   First Name:
   <input type="text">  
   Last  Name:
   <input type="text">  
   Comment:
   <input type="text">     
</form>

这就是你所需要的：

$('#form1 input').eq(0).val('Joe');

所以有一天你可以平静地在你的页面中使用更多的语言:)

Answer 4

这是一个坏主意，以这种方式搜索标签将迫使浏览器搜索比它应该搜索的更多元素。您应该为文本框使用 id，并通过 id 获取元素。

<label for="firstname">First Name: </label><input id="firstname"/>

$('#firstname').val('joe');

交替：

<label for="firstname">First Name: </label><input id="firstname" class="firstname"/>

$('input.firstname').val('joe');

或者

<label for="firstname">First Name: </label>
<input id="firstname" inputtype="firstname"/>

$('input[inputtype="firstname"]').val('joe');