在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>');
    }
})