2

尝试定位和更改我的标签的文本异常艰难

<li>
    <label></label><br/>
    <input type='tel' class='added_phone' name='' value='' maxlength='20' />
</li>

我的变量：

// Phone Inputs
var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

该函数检查存在多少电话对象，然后在页面上创建它们：

$(profileData.phones).each(function(i) {
    $('.new_option').append(inputphone);
    $('.added_phone').closest('label').text(profileData.phones[0].tag);
    $('.added_phone').attr('id', "added_"+profileData.phones[0].tag+"phone" + (i + 1));
        });
    $('.added_phone').attr('value', profileData.phones[0].label);
});

在此处输入图像描述

我能够发现有 1 个或多个电话对象，创建并显示输入，将电话号码放入字段中，但无法定位标签并放入标签（名称）。

尝试了最近，父，标签...代码隧道X_x

你会如何处理这个问题？

4

2 回答 2

3

好吧，鉴于您的以下 HTML：

<li>
    <label></label><br/>
    <input type='tel' class='added_phone' name='' value='' maxlength='20' />
</li>

然后，从input，label是：

$(this).parent().find('label');

或者：

$(this).prevAll('label');

li请注意，如果任何一个包含多个label/ ，这两种方法都可能返回多个元素input。

顺便说一句，你用label错了；它旨在识别文本标签和 a （或或）元素form的关系：inputtextareaselect

此属性明确地将正在定义的标签与另一个控件相关联。如果存在，此属性的值必须与同一文档中某个其他控件的 id 属性的值相同。如果不存在，则定义的标签与元素的内容相关联。

利用 which 的for属性label必须（如果要工作）与（或类似元素）的id属性相同：input

<li>
    <label for="inputID"></label><br/>
    <input id="inputID" type='tel' class='added_phone' name='' value='' maxlength='20' />
</li>

并且，考虑到这种关系，将两者关联起来会变得更容易一些（假设this指的是input元素）：

$('label[for="' + this.id + '"]');

参考：

于 2013-08-26T21:52:41.360 回答
2

您可以使用 .parent() 和 .find() 选择器来定位所需的元素：

jsFiddle在这里

HTML：

<div class="new_option"></div>
<input type="button" id="mybutt" value="Click Me">

$('#mybutt').click(function() {
    var inputphone = $("<li id='myLI'><label id='myLabel'></label><br/><input type='tel' class='added_phone' /></li>");
    $('.new_option').append(inputphone);
    alert($('.added_phone').parent().find('label').attr('id'));
});

并更新您的标签字段本身：

在这里更新了 jsFiddle

$('#mybutt').click(function() {
    var inputphone = $("<li id='myLI'><label id='myLabel'></label><br/><input type='tel' class='added_phone' /></li>");
    $('.new_option').append(inputphone);
    //alert($('.added_phone').parent().find('label').attr('id'));
    $('.added_phone').parent().find('label').text('Hey there');
});
于 2013-08-26T21:43:59.420 回答