Question

我对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本身并进行删除？这有意义吗？

Answer 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/

Answer 2

如果要根据某些条件替换HTML，请将其放在JS中。

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

Answer 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/

jQuery-HTML div选择 - 只选择一个

3 个答案: