Append an asterisk to the sibling of a div that contains a label with the class of .mandatory

Question

I wish to append and asterisk to the next sibling of a div that contains a label with a class of mandatory. This is to signify that a form field is required.

This mandatory marker works with the following code:

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

When the HTML is as follows:

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

However, in some cases the HTML is slightly different if the form field is a textarea rather than a textbox:

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

In this case I wish to append the mandatory script the file inputs div so have written the following jQuery script to first check that the fileinputs div exists and if so attempt to append the mandatory marker to it. If not, it should emulate the behavior of my script above:

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

This does not seem to work though for some reason. I believe it may be due to the find function not working correctly. I have also tried closest here.

Does anyone have any suggestions as to what may be doing wrong?

A working fiddle can be found here: http://jsfiddle.net/jezzipin/qRG57/

Many have complained that jQuery is unnecessary here so to clear up those comments, IE7 support is required so I cannot use modern CSS selectors. This is why I am having to do a lot of DOM manipulation with my jQuery rather than simply using CSS selectors.

Answer 1

OK, I understand you want it in the field so hopefully this works.

Use

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

You don't need to be using jQuery in this case, just plain CSS.

Edit: I was using input:required:before but remembered that inputs don't support :before or :after css :(

Answer 2

It would appear on my if condition that the .next() was missing so instead of looking at label.mandatory's parent sibling it was looking at the parent instead.

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