jquery:立即获取元素的上一个兄弟或父级
我有一个有几个输入的表单，它们旁边有一个相应的标签(左边)。
当我验证输入时，我想用相应的标签显示一条消息，以判断哪个输入是错误的。
我有一个显示标签的工作脚本，但是如果我的输入不是标签的直接兄弟，而是兄弟姐妹的孩子，它就会中断.
下面是用来说明的代码：
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>联署材料：
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;
}
});
}这是可玩的小提琴
所有输入都有一个相应的同级标签，但<select>除外，它位于<span>内部，它本身就是其标签的同级。
我的选择器label = $(this).prev("label").html();非常适合于所有输入( select除外)，因为它包含在span中(我需要这样做，因为这样的select是动态的，并通过AJAX插入到这个span中)
我知道我可以为select用另一个选择器工作，比如：label = $(this).parent().prev("label").html();，但是理想情况下，我希望只有一个选择器来获得所有标签，不管它们的对应输入有多深。
我也尝试过使用.closest()选择器，但它不起作用，我不知道为什么，但我认为它不起作用，因为标签不是select的占优势(它是它的父母的兄弟，比方说‘叔叔’)
所以，在所有情况下，我都可以使用哪个选择器来获得最接近输入的先前标签，尽管它是父母、兄弟姐妹、父母兄弟甚至是祖父母，无论如何.(我可以把输入埋在标签旁边的几个范围内，或者什么的)
换句话说，我如何遍历DOM“上面和左边”，并获得第一个选择器，无论他们是父母或兄弟姐妹？
回答 1
Stack Overflow用户
发布于 2015-04-17 16:49:48
在标签上使用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的另一种方法是将"message“标签存储在输入/选择的data属性中，而不是在DOM中搜索元素：
<input id="calle2" data-label="Calle" class="autoForm obligatorio" type="text" value="" name="calle2"/>jQuery：
label = $(this).attr('data-label');JSFiddle
https://stackoverflow.com/questions/29704916
复制相似问题
腾讯云开发者
