Как заменить этот html с помощью jquery?

#jquery

Вопрос:

У меня есть этот html.

 <div>
  <input type="password" id="user_password" name="user_password"
         class="password">

  <div class="passwordstrength s_1" style="display: block;">bad</div>

  <input type="password" id="user_password_confirm"
         name="user_password_confirm" class="password"
         style="display: inline-block;">
</div>

я хочу сбросить и заменить его обратно на

 <div>
  <input type="password" id="user_password" name="user_password"
         class="password">

  <div class="passwordstrength" style="display: none;"></div>

  <input type="password" id="user_password_confirm"
         name="user_password_confirm" class="password"
         style="display: none;">
</div>

как мне это сделать с помощью jQuery?

Ответ №1:

Предполагая, что вы имеете в виду, что хотите изменить первый пример, чтобы он стал вторым (а не то, что у вас есть второй пример на странице, и вы хотите заменить весь первый пример вторым), похоже, что все различия можно устранить следующим образом:

 $(".passwordstrength").removeClass("s_1").empty().hide();
$("#user_password_confirm").hide().val("");
$("#user_password").val("");

Различия:

.passwordstrength не имеет класса s_1 (это removeClass часть)
.passwordstrength внутри него нет текста (это empty часть)
.passwordstrength скрыт (эта и следующая hide части)
#user_password_confirm скрыто
Значения 2 input элементов сбрасываются (это val части)

Ответ №2:

 $('.passwordstrength').css('display','none');
$('#user_password_confirm').css('display','none');

Нет необходимости в замене html. Вы пытаетесь скрыть эти поля?

1. да, я пытаюсь скрыть эти поля. и я ненавижу замену html.

2. Тогда код, который я опубликовал, должен работать. Однако вы должны (как уже предлагалось) добавить идентификатор для каждого поля и использовать этот идентификатор, чтобы скрыть их. Вы также можете заменить .css('display','none') на .hide() , но hide() запускает много кода в jQuery.

Ответ №3:

 $(".passwordstrength").removeClass("s_1").val('').hide();
$("#user_password_confirm").val('').hide();

Ответ №4:

Просто используйте .html() :

 $('user_password').parent().html('you html does here');

Ответ №5:

Добавьте идентификаторы к двум разделам…

 <div id="div1">
    <input type="password" id="user_password" name="user_password" class="password">
    <div class="passwordstrength s_1" style="display: block; ">bad</div>
    <input type="password" id="user_password_confirm" name="user_password_confirm" class="password" style="display: inline-block; ">
</div>

<div id="div2">
    <input type="password" id="user_password" name="user_password" class="password">
    <div class="passwordstrength" style="display: none; "></div>
    <input type="password" id="user_password_confirm" name="user_password_confirm" class="password" style="display: none; ">
</div>

затем вы можете установить это с помощью следующего оператора:

 $('#div1').html($('#div2').html());