jQuery-Выбор HTML div -выбрать только один

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я новичок в jquery, и это мой первый вопрос.Простите, если это тривиально. У меня существует следующая структура страницы html-

 <div class="button-footer" data-role="footer"....>
  <div class="class1" data-role="navbar">
     <ul>
          <li>//these are buttons button 1
           <li>//button 2
     </ul>
  </div>
</div>

Теперь мне нужно сделать следующее-
Мне нужно иметь другой ul на основе некоторого условия, т.е. Если условие истинно, замените весь статический ul другим.Как мне поступить? Где должен быть размещен статический список ul для замены — в том же файле html или js?Я в замешательстве, пожалуйста, взгляните. Любая помощь очень ценится.
Это то, что я пробовал до сих пор-

 <div class="button-footer" data-role="footer"....>
  <div class="class1" data-role="navbar">
     <ul>
          <li>// button 1
           <li>//button 2
     </ul>
  </div>
<div class="class2" data-role="navbar">
     <ul>
          <li>// button 3
           <li>//button 4
     </ul>
  </div>
</div>

затем на странице .js я сделал это-

  if(condition)
    $( ".class1" ).remove();

else
   $( ".class2" ).remove();

по моему мнению, дело в том, что, поскольку оба ul являются статическими, почему бы не поместить их в сам html и выполнить удаление?имеет ли это смысл?

1. Вы уже предприняли какие-либо попытки и готовы предоставить нам некоторые соответствующие фрагменты кода?

2. создайте проблему с проблемой.

3. вы можете создать два ul с помощью hide и show class . в js измените добавление или удаление класса в зависимости от условия. или второе решение — изменить html-содержимое li на основе условия. Пожалуйста, предоставьте какой-нибудь jsfiddle или ваши усилия в коде, чтобы помочь.

Ответ №1:

Использовать replaceWith в jquery

Метод .replaceWith() удаляет содержимое из DOM и вставляет новое содержимое на его место одним вызовом.

 var cond = "3";
if (cond == "2") {

    $(".customul").replaceWith("<ul><li>hello </li> </ul>");

} else if (cond == "3") {

    $(".customul").replaceWith("<ul><li>hello user </li> </ul>");
} else

{
    $(".customul").replaceWith("<ul><li>hi </li> </ul>");

}

<div class="button-footer" data-role="footer">
    <div class="class1" data-role="navbar">this is data-role div
        <div class="customul">
            <ul>
                <li>hi</li>
            </ul>
        </div>
    </div>
</div>

http://jsfiddle.net/4ZS8g/1/

1. Это может быть не то, что задумано, поскольку $( «.class1″ ).replaceWith(‘..’) заменит <div class=»class1″ data-role=»navbar»> на новый <ul>

2. @vasa Чтобы РЕШИТЬ ЭТУ проблему, мы можем использовать ul в другом div.проверьте обновленный ответ

3. Этого нет в qn. Кроме того, новый <div> не служит здесь никакой цели, кроме как быть замененным позже.

4. @vasa . Есть так много способов, чувак. вы можете написать этот класс class=»customul» в теге ul . если вы не хотите добавлять новый div.

Ответ №2:

Если вы хотите заменить HTML на основе какого-либо условия, поместите его в JS.

 if(condition) {
  var new_ul_html = '<ul>.... </ul>'
  $('.button-footer .class1').html(new_ul_html);  
}

Ответ №3:

 $(document).ready(function () {
    var x;
    alert("");
    for (x = 0; x < 5; x  ) {
        if (x % 2 === 0) {
           $(".class1").append("<ul><li>Even</li><li>" x "</li></ul>");
        } else {
            $(".class1").append("<ul><li>Odd</li><li>" x "</li></ul>");
        }
    }


});

Попробуйте таким образом, может быть, это будет решением для вашего требования.

проверьте код здесь: http://jsfiddle.net/hqaUE/2 /