Question

我正在使用cordova app。我想使用jquery创建列表项。这是我的HTML代码：

 <div class="body" id="list">
        <ul class="list list-messages" id="list">


        </ul>
      </div>

这是我的js代码：

    <script>
        $(document).ready(function () {
            $(".navbar-title").html(localStorage.getItem("Provider"));

        $.ajax({
            type: 'Get',
            url: 'http://41.128.183.109:9090/api/data/getalllocations',
            success: function (data) {

            for (var i = 0; i < 11; i++) {

$("#list").append('<li class="list-message" data-ix="list-item"><a class="w-clearfix w-inline-block" href="chat.html" data-load="1"><div class="w-clearfix column-left"><div class="image-message"><img src="images/128.jpg"></div></div><div class="column-right"><div class="message-title">James White</div><div class="message-text">Hey dude! We are waiting for you at the main station, we will meet you near to....</div></div></a></li>');

                }

            }
        });
        });
    </script>

它不起作用。请建议

Answer 1

您应该使用.append()代替.html()

.html()正在替换div的内容，.append()会添加一些内容

for (var i = 0; i < 11; i++) {
    $("#list").append('<li class="list-message" data-ix="list-item"><a class="w-clearfix w-inline-block" href="chat.html" data-load="1"><div class="w-clearfix column-left"><div class="image-message"><img src="images/128.jpg"></div></div><div class="column-right"><div class="message-title">James White</div><div class="message-text">Hey dude! We are waiting for you at the main station, we will meet you near to....</div></div></a></li>');
}

Answer 2

你应该append() 不是html()

Html()会替换值和append()插入值。

＆＃13;

 $(document).ready(function () {

                $("#list").empty();
                for (var i = 0; i < 11; i++) {
                    $("#list").append('<li class="list-message" data-ix="list-item"><a class="w-clearfix w-inline-block" href="chat.html" data-load="1"><div class="w-clearfix column-left"><div class="image-message"><img src="images/128.jpg"></div></div><div class="column-right"><div class="message-title">James White</div><div class="message-text">Hey dude! We are waiting for you at the main station, we will meet you near to....</div></div></a></li>');

                }    
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body" id="list">
        <ul class="list list-messages" id="list">


        </ul>
      </div>

＆＃13;

Answer 3

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function () {
        for (var i = 0; i < 11; i++) {
            $("#list").append('<li class="list-message" data-ix="list-item"><a class="w-clearfix w-inline-block" href="chat.html" data-load="1"><div class="w-clearfix column-left"><div class="image-message"><img src="images/128.jpg"></div></div><div class="column-right"><div class="message-title">James White</div><div class="message-text">Hey dude! We are waiting for you at the main station, we will meet you near to....</div></div></a></li>');

        }

    });
</script>
</head>
<body>
   <div class="body" id="list">
        <ul class="list list-messages" id="Ul1">
        </ul>
      </div>
</body>
</html>

Answer 4

我通过删除＆＃34; data-ix =＆＃34; list-item＆＃34;解决了这个问题。现在我的代码是： $（＆＃34; #list＆＃34;）。追加（＆＃39; James WhiteHey老兄！我们在主站等你，我们会在附近见到你......＆＃39;）; 我不知道为什么但它现在正在运行。

在javascript中创建列表项

4 个答案: