Добавьте звездочку к брату div, который содержит метку с классом .mandatory

0

Я хочу добавить и звездочку к следующему брату 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, чтобы сначала проверить, существует ли файловая система 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>');
    }
})

По некоторым причинам это не работает. Я считаю, что это может быть из-за неправильной работы функции поиска. Я также попробовал самое близкое здесь.

Есть ли у кого-нибудь какие-либо предложения относительно того, что может быть неправильным?

Рабочую скрипку можно найти здесь: http://jsfiddle.net/jezzipin/qRG57/

Многие жалуются на то, что jQuery здесь лишний, поэтому для устранения этих комментариев требуется поддержка IE7, поэтому я не могу использовать современные селектора CSS. Вот почему мне приходится делать много манипуляций с DOM с помощью jQuery, а не просто с помощью селекторов CSS.

  • 0
    Почему вы не можете использовать :before на .mandatory и .mandatory это так?
  • 0
    Поскольку я не хочу, чтобы маркер появлялся или ассоциировался с меткой, он должен находиться на самом поле.
Показать ещё 5 комментариев
Теги:

2 ответа

0
Лучший ответ

Было бы в моем условии if, что отсутствует.next(), поэтому вместо того, чтобы смотреть на parent.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>');
    }
})
Поделиться
0

Хорошо, я понимаю, что ты хочешь этого в поле, так что, надеюсь, это сработает.

использование

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

В этом случае вам не нужно использовать jQuery, просто CSS.

Изменение: я использовал input:required:before но помнил, что входы не поддерживают :before или :after css :(

Поделиться
  • 0
    Мне нужно использовать jQuery, так как требуется поддержка IE7, иначе я бы не использовал jQuery.
  • 0
    @jezzipin поместите это в первый пост!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню