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

Posted 2023-05-09

【中文标题】jquery：立即获取元素的上一个兄弟或父元素

【英文标题】：jquery: get immediately previous sibling OR parent of element

【发布时间】：2015-06-24 15:24:39

【问题描述】：

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

当我验证输入时，我想使用相应的标签显示一条消息，以判断哪个输入是错误的。

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

下面是代码来说明：

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(); 非常适合选择的所有输入 excpet，因为它包含在一个跨度内（我需要这样，因为这样的选择是动态的，并且通过 AJAX 插入到这样的跨度内）

我知道我可以让它与另一个选择器一起工作，例如：label = $(this).parent().prev("label").html(); 但理想情况下，我希望只有一个选择器来获取所有标签，无论它们对应的输入有多深。

我也尝试使用 .closest() 选择器，但它不起作用，我不知道为什么，但我认为它没有，因为标签不是 select 的升序（它是兄弟它的父母，[比方说“叔叔”]）

那么我可以在所有情况下使用哪个选择器，以获取最接近输入的先前标签，尽管是父母、兄弟姐妹、父母兄弟姐妹甚至是祖祖父母，无论如何......（我可以隐藏在其标签旁边的几个跨度内的输入，或其他）

换句话说，我怎样才能遍历“左上方”的 DOM 并获得选择器的第一次出现，无论它们是父级还是兄弟级？

【问题讨论】：

@nirmal，小提琴已经在那里了。

@Nimal 问题完整且清晰

gist.github.com/ryankirkman/6630488

@mplungjan 看来您的解决方案不起作用。我试过here。也许我做错了什么？谢谢

【参考方案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 另一种方法是将“message”标签存储在输入/选择的data 属性中，而不是在 DOM 中搜索元素：

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

jQuery:

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

JSFiddle

【讨论】：

将 for 添加到标签后。好主意

哇！我不知道标签元素中的for 属性。就我而言，它肯定会起作用，但是，我仍然想知道如何使用 jQuery 实现此类选择。如果我想选择其他父/兄弟 html 元素而不是标签怎么办？谢谢！

...此外，如果我有一个标签用于多个连续输入，for 选项将不起作用。但是，我可以在标签上使用虚拟属性，并添加所有相应输入的 id，并使用稍微不同的选择器，例如 $('[dummy~="'+this.id+'"]').html(); 。是的！

这不是您的问题所涉及的（更复杂的）。然后我会采用另一种比这更简单的方法。更新了答案。