Question

我正在做一个jQuery移动示例应用程序，我在其中根据输入的搜索位置在网格中（动态地）检索值。

代码如下：

     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link type="text/css" rel="stylesheet" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script>
$(document).ready(function()
         {
    $('#stoplist').hide();
    $('#searchstop').change(function() {
    var searchstop=$('#searchstop').val();


$.ajax({  

    type: "GET",
    url: "BilaagValues?searchstop="+searchstop,  
    success:function (check) {
        console.log(check);
            var output = JSON.parse(check);
            console.log(output);

            $("#stoplist").show();
            $("#stop1").html(output.stopName);
            $("#mailbox1").html(output.mailboxno);
            $("#mailboxname").html(output.mailName);
            $("#advtbox1").html(output.advtno);
            $("#advtboxname").html(output.advtname);
    },

    success:function (check1) {
        console.log(check1);
            var output = JSON.parse(check1);
            console.log(output);

            $("#stoplist1").show();
            $("#stop2").append(output.stopName);
            $("#mailbox2").append(output.mailboxno);
            $("#mailboxname1").append(output.mailName);
            $("#advtbox2").append(output.advtno);
            $("#advtboxname1").append(output.advtname);

    }
    });
    });
    });

</script>
</head>
<body>


<div data-role="header" id="header">
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true" id="header"></a>
    <h1>Ruteoversikt</h1>
  <a href="#" data-role="button" data-theme="b" data-inline="true" id="header">Rediger</a>
</div>
 <div>  
 <input id="searchstop"  placeholder = "Stop pa Navvn" /></div>
<hr>
   <div id="unitno">221721_0030</div>
<hr>
<br/>
<hr>
<div id="stoplist">
<div class="ui-grid-b" id="address1">
<img id="picture1" src="post1.jpg"/>

<div id="stop1"></div><br>

<div id="mailbox1" style="border-width: 2px; border-style: double; border-color: grey; background-color:green"></div>&nbsp &nbsp &nbsp &nbsp &nbsp  <div id="mailboxname"></div> 
<div id="advtbox1" style="border-width: 2px; border-style: double; border-color: grey; "></div> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  <div id="advtboxname"></div>
</div>
</div>
<div id="stoplist1">
<div class="ui-grid-b" id="address1">


<div id="stop2"></div><br>

<div id="mailbox2" style="border-width: 2px; border-style: double; border-color: grey; background-color:green"></div>&nbsp &nbsp &nbsp &nbsp &nbsp  
<div id="mailboxname1"></div> 
<div id="advtbox2" style="border-width: 2px; border-style: double; border-color: grey; "></div> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  <div id="advtboxname1"></div>

</div>
</div>
<hr>
</body>
</html>

    Now here the problem which is arising is that I want the 2nd set of values ie. in div with id "stopList1" to be appended below the first set of values which are there in first grid. In simple terms, The values retrieved for 2nd search should be appended below the first set of values but what is happening in my case is that the next set of values are getting appended above the first set of values,,, in the same grid...!!!!

如何解决这个????

请帮助您提出建议。

Answer 1

尝试使用添加到原始内容中的新值替换内容。 $('#stoplist1').html($('#stoplist1').html() + 'Whatever code you want here');

Answer 2

$（'＃stoplist1'）。append（'无论你想要什么代码'）;

在jQuery移动页面中动态附加div标签

2 个答案: