Javascript 如何在JQuery移动列表视图中添加多个信息

我正在获取JSON数据（给定距离内可用的酒店列表）。我得到以下JSON格式的信息，酒店名称，酒店距离我们当前位置的距离，房间数量。在给定距离内可能有多家酒店。我们必须在列表视图中打印所有这些信息，如下所示。我想将所有信息（如下图所示）合并到一个列表视图中

当我们单击任何酒店列表时，它将重定向到酒店网站或更多详细信息专用酒店页面。

Javascript代码不可用。

    <script> 
            $(document).ready(function(){ 
                $("#btnReg").click(function(){ 
                    $("#listOfHotelOption").empty();
                    var distance = document.getElementById('distance_id').value; 
                    var output=""; 
                    $.ajax({ 
                            url:"http://192.168.1.4/Experiements/webservices/getBuddy.php", 
                            type:"GET", 
                            dataType:"json", 
                            data:{type:"login", Distance:distance}, 
                            ContentType:"application/json", 
                            success: function(response){ 
                            console.log(response) 
                                $.each(response, function(index,value){ 

                                 output+="<li>"+value.Hotel.Name+" "+value.Hotel.Distance+" " +value.Hotel.Rooms+"</li>";
                                }); 
                            $("#listOfHotelOptions").append(output).listview().listview('refresh'); 
                        }, 
                            error: function(err){ 
                            alert(JSON.stringify(err)); 
                        } 
                    }) //ajax 
                }); //click 
            }); //ready 
    </script>

**My server site code is** 

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","1234");
mysql_select_db("hotels");
if(isset($_GET['type']))
{
    if($_GET['type']=="login"){
        $distanceInKM=$_GET['Distance'];       
        $query="Select * from Hotels where Distance<='$distanceInKM'";
        $result=mysql_query($query);
        $totalRows=mysql_num_rows($result); 
        if($totalRows>0){
            $recipes=array();
            while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
                $recipes[]=array('Hotel'=>$recipe);
            }
            $output=json_encode(($recipes));
            echo $output;
        }
    }
}
else{
    echo "Invalid format";
}

$（文档）.ready（函数（）{
$（“#btnReg”）。单击（函数（）{
$（“#listOfHotelOption”）.empty（）；
var distance=document.getElementById（'distance_id'）。值；
var输出=”；
$.ajax（{
url:“http://192.168.1.4/Experiements/webservices/getBuddy.php", 
键入：“获取”，
数据类型：“json”，
数据：{类型：“登录”，距离：距离}，
ContentType:“应用程序/json”，
成功：功能（响应）{
console.log（响应）
$.each（响应、函数（索引、值）{
输出+=“
”+value.Hotel.Name+”“+value.Hotel.Distance+”“+value.Hotel.Rooms+”
”；
}); 
$（“#listOfHotelOptions”）.append（output.listview（）.listview（'refresh'）；
}, 
错误：函数（err）{
警报（JSON.stringify（err））；
} 
})//ajax
})；//单击
}); //准备好的
**我的服务器站点代码是**
我准备了一个演示，从列表项中获取数据，并接近您想要实现的格式

演示


Jquery要从您使用的列表项中获取数据
是否要将列表项的格式设置为您拥有的图片？@Tasos，对不起，请忽略前面的评论，我正在尝试这样输出+=“
”+“+”+”+value.Hotel.Name+“have”+value.Hotel.Rooms+“available”+“
”；此外，每个列表显示都可以单击并重定向到dedecated hotel页面。@neelabhsingh没问题。另请参见重定向到酒店网站的最后一个注释SK，这与我们昨天讨论的相同，现在我需要打印特定酒店的所有信息，并将其放在单一列表视图中，当我们单击列表时，它将重定向到专用酒店页面或酒店网站
$(document).on("click", "#hotels >li", function () {
var hotelname = $(this).closest("li").attr('data-hotel');
var rooms = $(this).closest("li").attr('data-rooms');
alert(hotelname + "--" + rooms)
})

<li data-hotel="taj" data-rooms="10"><a>
    <img src="http://s30.postimg.org/9evb4kq65/album_bb.jpg">
        <h2>Hotel:<span class="hotel">Taj</span><span class="avail">Available Rooms:<span class="rooms">10</span></h2>
        <p>Distance:<span class="distance">10km</span></p> <img src="http://s21.postimg.org/3qio5rxeb/album_p.jpg" class="sideimg"></a>

</li>

.sideimg{
 position: absolute;
right:0 !important;
top: 0 !important;
max-height: 5em !important;
max-width: 5em !important;
}

 .ui-listview>li h2 {
margin-top: -5px !important;
}
.ui-listview>li p {
margin-top:10px !important;
}

.hotel, .rooms { padding-left: 5px; }


.avail { padding-left: 15px; }