Javascript 在jQuery中查找以前同级的子级

我正在修改现有的代码，所以我只能影响现有的元素，而不是正确地构建它。我正在迭代所有包含类reqd的

范围，如果是这样，我要么选择前一个同级（示例1），要么选择前一个同级的第一个子类型input（示例2），并将jQuery validate属性附加到它

例如，使用
prev（）。对于示例2和示例3，我必须使用
previtil（）
，以便更好地隔离DOM的目标位置

我的问题在于例子2。虽然我可以达到<代码>类=“ReGieldLabel< /Cord>”，但我不能让它遍历它的子集。
//Example code 1
<input type="text" name="str_cvv" value="" maxlength="3" size="4" id="CVV">
<span class="reqd">*</span>

//Example code 2
<span class="regfieldlabel">
      <input type="text" name="nameOnCard" size="30" maxlength="50" id="cardName" value="">
</span>
<span class="reqd">*</span>

//Example code 3
<span class="regfieldlabel">
      <input type="text" name="nameOnCard" size="30" maxlength="50" id="cardName" value="">
</span>
<span class="regfieldlabel"> </span>
<span class="reqd">*</span>

<script>
$(function() {
    $("span").each(function(){
        //Highlight all fields that have a red asterisk at the end for validation
        if ($(this).hasClass('reqd')) {
            $(this).prev().attr('data-rule-required', true).attr('data-msg-required', 'This field is required');
            $(this).prevUntil('.regfieldlabel').find('input').attr('data-rule-required', true).attr('data-msg-required', 'This field is required');

        }
    });
});
</script>

//示例代码1
*
//示例代码2
*
//示例代码3
*
$（函数（）{
$（“span”）。每个（函数（）{
//突出显示所有在结尾处带有红色星号的字段以进行验证
if（$（this）.hasClass（'reqd'））{
$（this.prev（）.attr（'data-rule-required'，true）.attr（'data-msg-required'，'this field is required'）；
$（this）.previtil（'.regfieldlabel'）.find（'input'）.attr（'data-rule-required'，true.）.attr（'data-msg-required'，'this field is required'）；
}
});
});
在
之前，您不想使用
previt，从中可以看到：

描述：获取每个元素的所有前面的同级，直到，但不包括
包括选择器、DOM节点或jQuery匹配的元素
反对

因此，
$（this）.prevUntil（'.regfieldlabel'）
实际上是空的

例如，您仍然希望仅使用
prev
：

$(this).prev('.regfieldlabel').find('input')


对于一般解决方案，您必须检查您所处的情况，以便执行正确的操作：

$("span.reqd").each(function(){

    var $this = $(this);
    var $prev = $this.prev();
    var $input = $([]); // init to empty

    if($prev.is("input")){
        // EXAMPLE 1
        $input = $prev;

    } else if($prev.is(".regfieldlabel")){
        var $innerInput = $prev.find("input");

        if($innerInput.length > 0){
            // EXAMPLE 2
            $input = $innerInput;
        } else {
            $prev = $prev.prev(".regfieldlabel");
            $innerInput = $prev.find("input");

            if($innerInput.length > 0){
                // EXAMPLE 3
                $input = $innerInput;
            } else {
                // unknown case, maybe do something here
            }
        }
    } else {
        // unknown case, maybe do something here
    }

    $input.attr('data-rule-required', true).attr('data-msg-required', 'This field is required');

});

为什么代码不只是执行
$（“span.reqd”）。每个（
从一开始就执行？我不知道为什么，因为您完全正确。@epascarello是对的。inspect元素向我显示它将数据属性附加到父级
span.regfieldlabel
。问题是“我的问题与示例有关”\2“所以我没有提到例子3。我将用例子3更新。@AngrySpartan用包括工作例子在内的通用解决方案更新了。干得好！太好了，另一个提交的答案显然是匿名的。”。