Question

我有一个带有多个输入的表单，以及它们旁边的相应标签（左侧）。

当我验证输入时，我想显示一条消息，其中包含相应的标签，以告知输入错误。

我有一个工作脚本显示我想要的标签，但如果我的输入不是标签的直接兄弟，而是兄弟姐妹的孩子，它会中断...

以下是代码说明：

HTML：

<form>
<label class="autoFormLabel obligatorio">* calle : </label>
<input id="calle2" class="autoForm obligatorio" type="text" value="" name="calle2">
<br>
<label class="autoFormLabel obligatorio">* CP : </label>
<input id="CP" class="autoForm obligatorio" type="text" value="" name="CP">
<br>
<label id="label_colonia" class="autoFormLabel obligatorio">* Colonia : </label>
<span id="span_combo_colonias">
    <select id="Colonia" class="obligatorio autoForm" name="Colonia">
    <option selected="" value="0">-- seleccione --</option>
        <option  value="1">one</option>
        <option  value="2">two</option>
    </select>
</span>
<br>
<label class="autoFormLabel obligatorio">* Delegacion : </label>
<input id="delegacion" class="autoForm obligatorio" type="text" value="" name="delegacion" >
<br>

    <input type="button" id="val" value="Val" />

</form>

JS：

function validate(){
    $(":input.obligatorio:enabled").each(function( i, el ){ // solo considerar los enableds            
        if( $(this).val() == "" || $(this).val() == "0" || $(this).val() == 0){

            label = $(this).prev("label").html(); //A: works for all but select            
            //label = $(this).parent().prev("label").html(); //B: works for select, but not the others         
            //label = $(this).closest("label").html(); //C: why doesn't work for select?

            alert("El campo:\n\n"+label+"\n\nno puede ir vacio");
            $(this).focus();
            return false;
        }       
    });
}

以及a fiddle to play with

所有输入都有一个相应的兄弟标签，<select>除外，<span>位于label = $(this).prev("label").html();内，它本身就是其标签的兄弟。

我的选择器label = $(this).parent().prev("label").html();适用于select的所有输入excpet，因为它包含在span中（我需要它，因为这样的select是动态的，并通过AJAX插入到这样的span中）

我知道我可以使用其他选择器来处理选择案例，如下所示：{{1}} 但理想情况下，我想只有一个选择器来获取所有标签，无论它们的输入有多深。

我也试过.closest（）选择器，但它不起作用，我不知道为什么，但我认为它没有，因为标签不是选择的上升（这是它的父母的兄弟，[让我们说一个＆＃39;叔叔＆＃39;]）

所以我可以使用哪个选择器来获取最接近的输入标签，尽管是父母，兄弟姐妹，父母兄弟，甚至是盛大的大父母，无论如何...（我本可以在其标签旁边的几个跨度中埋藏的输入，或者其他任何内容

换句话说，我如何遍历DOM＆＃34;上方和左侧＆＃34;并获得选择器的第一个选择，无论他们是父母还是兄弟姐妹？

Answer 1

在标签上使用for属性：

<label for="calle2" class="autoFormLabel obligatorio">* calle : </label>
<input id="calle2" class="autoForm obligatorio" type="text" value="" name="calle2"/>
...

然后使用以下jQuery选择器获取标签文本：

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

JSFiddle

Jet另一种方式是存储＆＃34; 消息＆＃34;在输入/选择的data属性中标记，而不是在DOM中搜索元素：

<input id="calle2" data-label="Calle" class="autoForm obligatorio" type="text" value="" name="calle2"/>

jQuery的：

label = $(this).attr('data-label');

JSFiddle

jquery：立即获取前一个兄弟或元素的父元素

1 个答案: