查找单词旁边的输入框答案

【问题标题】：Find Input box next to the word查找单词旁边的输入框
【发布时间】：2012-06-26 18:48:46
【问题描述】：

我有一个表格...

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

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

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

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

【问题讨论】：

相反，您不能为输入分配一个 id 并使用 #textboxid 选择它吗？
您需要更加具体。 “名称周围可能有标签标签，输入周围也可能有 div/span 标签。”不够具体，这可能会导致 20-30 种不同的输入包装方式，从而导致在 jQuery 中执行很多 * 5 种不同的方式。
@KevinB 这是我能解释的最好的，因为每次页面加载时表单都可能不同。虽然文本和输入通常是相同的
@Joe - 你试过我的解决方案了吗？
First Name: 是否也可能缺少 :，或者被包裹在任意数量的不同可能元素中？这使得几乎不可能创建一个适用于所有情况的脚本，除非输入具有通用名称或 ID，或者每次都是表单中的唯一输入。

标签： jquery

【解决方案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';

【讨论】：

【解决方案2】：

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

直接选择输入

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

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

【讨论】：

我需要先找到匹配词的位置来确定它的位置。一旦我找到了，我就可以在右边找到输入的位置，除非你有更好的东西
“向右”是行不通的。向右可能意味着在 1 上遍历 2 个元素并在 4 上遍历，或在 2 上向上 1 和在 1 下遍历，或在 1 上向上 0 和在 6 下遍历，等等。使用表格进行布局的表单如何使用标签和输入的布局在两个完全不同的行中？
如果您告诉我们所有的可能性是什么，我们或许可以为您提供具体的解决方案。

【解决方案3】：

这是个坏主意，以这种方式搜索标签将迫使浏览器搜索比应有的更多元素。您应该为文本框使用 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');

【讨论】：

【解决方案4】：

jsBin demo

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');

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

【讨论】：