Question

我有多个使用不同输入名称和id动态创建的表单。他们唯一的独特之处在于标签的内部HTML。是否可以通过标签内部HTML使用jQuery选择输入？这是一个我的患者出生日期的例子，除了innerHTML之外，还有许多独特的。

<div class="iphorm-element-spacer iphorm-element-spacer-text iphorm_1_8-element-spacer">
<label for="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">events=Object { mouseover=[1], mouseout=[1]}handle=function()data=Object { InFieldLabels={...}}
    Patient DOB
    <span class="iphorm-required">*</span>
</label>
<div class="iphorm-input-wrap iphorm-input-wrap-text iphorm_1_8-input-wrap">
    <input id="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8" class="iphorm-element-text iphorm_1_8" type="text" value="" name="iphorm_1_8">events=Object { focus=[1], blur=[1], keydown=[1], more...}handle=function()
</div>
<div class="iphorm-errors-wrap iphorm-hidden"> </div>

这是在Wordpress插件中，因为我们正在构建允许员工编辑他们的网站（这实际上是一个Wordpress网络），我们不希望在可能的情况下更改插件。请注意，标签“for”和输入“id”共享相同的动态密钥，因此这可能是获取id的方法，但是想知道是否有更短的方法来执行此操作。

我在这里清理了可能没用过的东西......

<div>
<label for="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">
    Patient DOB
    <span class="iphorm-required">*</span>
</label>
<div>
    <input id="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">
</div>

Answer 1

var getForm = function(labelInnerHtml) {
    var $labels = jQuery('label');
    $labels.each(function() {
       if (jQuery(this).html() == labelInnerHtml) {
            var for_id = jQuery(this).attr('for');
            return jQuery('#'+for_id);
        }
    });
    return [];
};

Answer 2

您可以使用contains selector选择Patient DOB标签，然后找到相关的输入。

$('label:contains("Patient DOB")').parent('div').find('input');

这假设label和input包含在同一个div中，如果多个对在同一个div中，则可能无效。至少第一部分会为您提供包含Patient DOB的标签，然后您可以调整后面的部分以找到正确的输入元素。

有关jquery选择器的更多帮助，请参阅API。

这是一个fiddle来证明这一点。

Answer 3

输入上的类iphorm_1_8对于每个表单元素都是唯一的。所以很简单。

$('.iphorm_1_8');

如何根据标签内部HTML选择表单输入？

3 个答案: