在div的同级项上附加一个星号，该div包含带有.mandatory类的标签

Question

我希望在div的下一个兄弟后面加上星号，该div包含带有强制类的标签。 这表示必须填写表单字段。

此强制性标记与以下代码一起使用：

jQuery('label.mandatory').parent().next().append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');

HTML如下时：

<div class="formdetails p_3">
    <div class="label">
        <label for="p_3" class="mandatory" id="p_3ErrorMessage">Sexuality</label>
    </div>
    <div class="detail" id="ext-gen13">
        <div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen15" style="width: 194px;">
            <input type="hidden" id="ext-gen17" name="p_3" value="">
            <input type="text" autocomplete="off" size="24" id="ext-gen14" class="x-form-text x-form-field" style="width: 169px;">
            <img class="x-form-trigger x-form-arrow-trigger" alt="" src="#" id="ext-gen16">
        </div>
        <input type="hidden" value="2385" name="p_id3">
    </div>
</div>

但是，在某些情况下，如果表单字段是文本区域而不是文本框，则HTML会稍有不同：

<div class="formdetails p_1">
    <div class="label">
        <label for="p_1" class="mandatory" id="p_1ErrorMessage">CV</label>
    </div>
    <div class="detail">
        <div class="fileinputs">
              <input type="file" class="file icams-field-text required  textfield" autocomplete="off" id="p_1" name="p_1">
        </div>
        <input type="hidden" value="2376" name="p_id1">
    </div>
</div>

在这种情况下，我希望将强制性脚本附加到文件输入div上，因此编写了以下jQuery脚本以首先检查fileinputs div是否存在，如果存在，请尝试将强制性标记附加到它上。 如果没有，它应该模仿上面脚本的行为：

jQuery('label.mandatory').each(function(){
    if($(this).parent().find('div.fileinputs').length){
        $(this).parent().next().find('div.fileinputs').append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');
    }else{
        $(this).parent().next().append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');
    }
})

尽管出于某些原因，这似乎不起作用。 我相信这可能是由于find函数无法正常工作。 我也在这里尝试过。

是否有人对做错事有任何建议？

可以在这里找到有效的小提琴： http : //jsfiddle.net/jezzipin/qRG57/

许多人抱怨说jQuery在这里是不必要的，因此为了清除这些注释，需要IE7支持，因此我不能使用现代CSS选择器。 这就是为什么我必须使用jQuery而不是简单地使用CSS选择器来进行大量DOM操作的原因。

Answer 1

好的，我知道您希望在现场使用它，因此希望它能奏效。

采用

.mandatory:before{
    content:" * ";
    /* more styles to align the asterisk properly */
}

在这种情况下，您不需要使用jQuery，只需使用普通CSS。

编辑：我在使用input:required:before但记得输入不支持:before或:after css :(

Answer 2

在我的if条件下会出现.next（）丢失的情况，因此与其查看label.mandatory的父级同级，不如查看父级。

jQuery('label.mandatory').each(function(){
    if($(this).parent().next().find('div.fileinputs').length){
        $(this).parent().next().find('div.fileinputs').append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');
    }else{
        $(this).parent().next().append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');
    }
})