Добавить класс к меткам формы в jquery

Question

Я пытаюсь изменить контактную форму WordPress, чтобы настроить ее.Я уже добавил функцию для использования меток-заполнителей.Так что теперь я хочу добавить класс, который соответствует их атрибуту «for =» для каждого из них, чтобы скрыть текст метки.

Есть ли способ сделать это в jquery?

это мой jquery:

jQuery(document).ready(function(){
    jQuery('#user_login').attr('placeholder', 'Name');
    jQuery('#user_email').attr('placeholder', 'Email');
    jQuery('#user_pass').attr('placeholder', 'Password');         

});

и мой html:

<form name="loginform" id="loginform" action="http://localhost/patrick/waf" method="post" style="position: static; left: 0px;">
    <p>
        <label for="user_login">Nom d’utilisateur ou adresse e-mail<br>
        <input type="text" name="log" id="user_login" aria-describedby="login_error" class="input" value="" size="20" placeholder="Name"></label>
    </p>
    <p>
        <label for="user_pass">Mot de passe<br>
        <input type="password" name="pwd" id="user_pass" aria-describedby="login_error" class="input" value="" size="20" placeholder="Password"></label>
    </p>
        <div>
        <div id="areyouhuman">
            <label>
                <span class="checkme" role="checkbox" tabindex="0" aria-checked="false"></span>
                <i class="checkme">Oui, je suis un humain.</i>
            </label>
        </div>
        <div id="msg" class="hidden">Session expirée, merci de réessayer.</div>
        <input type="hidden" name="captcha_key" id="captcha_key" value="">
    </div>
        <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" checked="checked"> Se souvenir de moi</label></p>
    <p class="submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Se connecter">
        <input type="hidden" name="redirect_to" value="http://localhost/patrick/wp-admin/">
        <input type="hidden" name="testcookie" value="1">
    </p>
</form>

Answer 1

Использовать селектор атрибута.

$("label[for=user_login],label[for=user_email],label[for=user_pass]")
    .contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("");

См. Как изменить текст элемента без изменения его дочерних элементов? для объяснения того, как это работает.Этот сложный код необходим, потому что элементы <label> обертывают входы, поэтому вы не можете просто сделать .text(""), потому что это также приведет к удалению входов.

Вы также можете просто полностью избавиться от метокс unwrap().

jQuery(document).ready(function(){
    jQuery('#user_login').attr('placeholder', 'Name').unwrap();
    jQuery('#user_email').attr('placeholder', 'Email').unwrap();
    jQuery('#user_pass').attr('placeholder', 'Password').unwrap();         

});