простая форма добавить класс к окружающему DIV

Question

Я пишу пользовательскую оболочку для простой формы:

## Inputs 
b.wrapper tag: :div, class: 'col-lg-4 input-group' do |component| 
    component.use :input, class: 'form-control' 
    component.wrapper tag: :span, class: 'input-group-addon' do |icon| 
    icon.wrapper :icon, tag: :i do 
    end 
    end 
end 

генерирует HTML:

<div class="string optional q_post_date_gteq"> 
<div class="col-lg-4 input-group"> 
    <input class="string optional datepicker form-control" placeholder="Start" type="text" name="q[post_date_gteq]" id="q_post_date_gteq"> 
    <span class="input-group-addon"><i class="icon-calendar"></i></span> 
</div> 
</div> 

<div class="string optional q_post_date_gteq">, кажется, генерироваться автоматически. Я хочу добавить к нему класс, как это возможно?

Answer 1

Простая форма генерирует обертку div вокруг ввода и метки по умолчанию. Есть два способа, которыми я знаю, настроить параметры html для вашей пользовательской оболочки.

1. Вы можете передать wrapper_html опцию в виде строителя в шаблоне:

f.input :some_property_name, wrapper_html: { class: 'your-class' } 

2. Pass опции класс wrappers при определении пользовательской оболочки:

config.wrappers :your_wrapper_name, class: 'your-class' do |b| ... 

Там некоторые отличные документы об определении пользовательских оберток, если вам нужна дополнительная помощь! https://github.com/plataformatec/simple_form/wiki/Custom-Wrappers

Answer 2

Если вы не можете найти ответ, используя только рубин, это может сделать трюк:

$(document).ready(function() { 
    $(".q_post_date_gteq").addClass("..."); 
}); 

EDIT:

Чтобы ответить на комментарии: добавить «обертку», так что у вас есть что-то вроде это

<div class="simple-form-wrapper"> 
    <div class="string optional q_post_date_gteq"> 
    <div class="col-lg-4 input-group"> 
     <input class="string optional datepicker form-control" placeholder="Start" type="text" name="q[post_date_gteq]" id="q_post_date_gteq"> 
     <span class="input-group-addon"><i class="icon-calendar"></i></span> 
    </div> 
    </div> 
</div> 

И теперь, JQuery часть становится:

$(document).ready(function() { 
    $(".simple-form-wrapper").children.first.addClass("..."); 
});