Question

我正在修改现有代码，所以我只能影响存在的元素而不是构建它的权利。我正在迭代所有具有 reqd 类的spans，如果是这样，我要么采取前一个兄弟（例1）或前一个兄弟的第一个输入类型的子（例2）并将jQuery验证属性附加到它。

使用prev()例如＃1，这很容易。我必须使用prevUntil()作为示例2和3来更好地隔离我定位DOM的位置。

我的问题是示例＃2。虽然我可以达到class="regfieldlabel但我无法穿越它的孩子。示例＃3与＃2类似，只是中间有一个空的span标记。

//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>

Answer 1

您不想使用prevUntil中的$(this).prevUntil('.regfieldlabel')，您会看到：

描述：获取每个元素的所有前面的兄弟，直到但不是包括由选择器，DOM节点或jQuery匹配的元素对象

因此，prev实际上是空的。

对于示例2，您仍然只想使用$(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');

});

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

{{1}}

docs

在jQuery中找到前一个兄弟的孩子

1 个答案: