Question

我正在尝试克隆div＆＃34; questbox＆＃34;并使用新内容将其插入现有div。但是克隆重复的次数多于错误的次序。我想按顺序最新 - ＆gt;最老的。

HTML

<div id="top_quest">
    <div class="questbox">
        <div class="quest" style="display:inline-block; width:75%;">
            <h5 id="question"></h5>
        </div>
        <div class="up-vote" style="display:inline-block; float:right; width:25%; text-align:center;">
            <button type="button" class="btn btn-lg btn-primary knapp"><div class="arrow-up"/></button>
            <h5 id="upvotes"></h5>
        </div>
    </div>
</div>

JAVASCRIPT

function insertPost(){
    var obj, dbParam, xmlhttp, myObj, x;
    obj = { "table":"text", "limit":15 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          myObj = JSON.parse(this.responseText);

          for (x in myObj) {
              document.getElementById("question").innerHTML = myObj[x].text;
              document.getElementById("upvotes").innerHTML = myObj[x].upvotes;

              var parrent = document.getElementById("top_quest")
              var div = document.getElementById("top_quest");
              var clone = div.cloneNode(true);
              parrent.insertBefore(clone, parrent.firstChild);
          }
      }
    };
    xmlhttp.open("GET", "getPostsForLecture.php?q=", true);
    xmlhttp.send();
}

Answer 1

那里有几个问题：

您正在将protected void Page_Load(object sender, EventArgs e) { Button btn = new Button(); btn.Text = "Dynamic Button"; btn.ID = "b1"; // Server Side ID btn.Click += b1_click; logout.Controls.Add(btn); } public void b1_click(Object sender,EventArgs e) { Response.Redirect("~/Accounts/login.aspx"); } 的克隆插入 #top_quest。当然这会导致重复。
您还使用#top_quest id "top_quest"，"question"，"upvotes"来创建一堆元素...这是无效的。只能有一个。

首先，让我们使用类来消除问题和upvotes元素上的id值：

<div id="top_quest">
    <div class="questbox">
        <div class="quest" style="display:inline-block; width:75%;">
            <h5 class="question"></h5>
        </div>
        <div class="up-vote" style="display:inline-block; float:right; width:25%; text-align:center;">
            <button type="button" class="btn btn-lg btn-primary knapp"><div class="arrow-up"/></button>
            <h5 class="upvotes"></h5>
        </div>
    </div>
</div>

现在，我们只复制.questbox内的第一个#top_quest，而不是#top_quest本身。在此过程中，我们将以不同的方式查找问题和提升元素（现在他们使用类）和其他一些调整。见评论：

function insertPost(){
    var obj, dbParam, xmlhttp, top_quest;
    // *** Grab the parent element just once, no need to keep looking it up in the loop
    top_quest = document.getElementById("top_quest");
    obj = { "table":"text", "limit":15 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          var myObj = JSON.parse(this.responseText);
          Object.keys(myObj).forEach(function(key) {
              var entry = myObj[key];
              // Get the first .questbox and clone it
              var clone = top_quest.querySelector(".questbox").cloneNode(true);
              // Set the question and upvotes
              clone.querySelector(".question").innerHTML = entry.text;
              clone.querySelector(".upvotes").innerHTML = entry.upvotes;
              // Append the clone at the top
              top_quest.insertBefore(clone, top_quest.firstChild);
          });
      }
    };
    xmlhttp.open("GET", "getPostsForLecture.php?q=", true);
    xmlhttp.send();
}

使用假ajax响应的实例：

var counter = 0;
function insertPost(){
    var obj, dbParam, xmlhttp, top_quest;
    // *** Grab the parent element just once, no need to keep looking it up in the loop
    top_quest = document.getElementById("top_quest");
    obj = { "table":"text", "limit":15 };
    dbParam = JSON.stringify(obj);
    // setTimeout to fake the ajax
    setTimeout(function() {
          // This really should be an array, not an object
          var myObj = {
             13: {text: "Question " + (++counter), upvotes: Math.floor(Math.random() * 10)},
             14: {text: "Question " + (++counter), upvotes: Math.floor(Math.random() * 10)},
             15: {text: "Question " + (++counter), upvotes: Math.floor(Math.random() * 10)}
          };
          Object.keys(myObj).forEach(function(key) {
              var entry = myObj[key];
              // Get the first .questbox and clone it
              var clone = top_quest.querySelector(".questbox").cloneNode(true);
              // Set the question and upvotes
              clone.querySelector(".question").innerHTML = entry.text;
              clone.querySelector(".upvotes").innerHTML = entry.upvotes;
              // Append the clone at the top
              top_quest.insertBefore(clone, top_quest.firstChild);
          });
          if (counter < 10) {
              insertPost();
          }
    }, 500);
}
insertPost();

<div id="top_quest">
    <div class="questbox">
        <div class="quest" style="display:inline-block; width:75%;">
            <h5 class="question"></h5>
        </div>
        <div class="up-vote" style="display:inline-block; float:right; width:25%; text-align:center;">
            <button type="button" class="btn btn-lg btn-primary knapp"><div class="arrow-up"/></button>
            <h5 class="upvotes"></h5>
        </div>
    </div>
</div>

注意：但这总是留空.questbox。您可以考虑使用template元素，或者在页面加载时从DOM中拉出第一个默认元素并保留它的副本：

// Grab the structure we'll clone when necessary
var questbox = document.querySelector("#top_quest .questbox");
questbox.parentNode.removeChild(questbox);
var counter = 0;
function insertPost(){
    var obj, dbParam, xmlhttp, top_quest;
    // *** Grab the parent element just once, no need to keep looking it up in the loop
    top_quest = document.getElementById("top_quest");
    obj = { "table":"text", "limit":15 };
    dbParam = JSON.stringify(obj);
    // setTimeout to fake the ajax
    setTimeout(function() {
          // This really should be an array, not an object
          var myObj = {
             13: {text: "Question " + (++counter), upvotes: Math.floor(Math.random() * 10)},
             14: {text: "Question " + (++counter), upvotes: Math.floor(Math.random() * 10)},
             15: {text: "Question " + (++counter), upvotes: Math.floor(Math.random() * 10)}
          };
          Object.keys(myObj).forEach(function(key) {
              var entry = myObj[key];
              // Get the first .questbox and clone it
              var clone = questbox.cloneNode(true);
              // Set the question and upvotes
              clone.querySelector(".question").innerHTML = entry.text;
              clone.querySelector(".upvotes").innerHTML = entry.upvotes;
              // Append the clone at the top
              top_quest.insertBefore(clone, top_quest.firstChild);
          });
          if (counter < 10) {
              insertPost();
          }
    }, 500);
}
insertPost();

<div id="top_quest">
    <div class="questbox">
        <div class="quest" style="display:inline-block; width:75%;">
            <h5 class="question"></h5>
        </div>
        <div class="up-vote" style="display:inline-block; float:right; width:25%; text-align:center;">
            <button type="button" class="btn btn-lg btn-primary knapp"><div class="arrow-up"/></button>
            <h5 class="upvotes"></h5>
        </div>
    </div>
</div>

克隆div和insertBefore

1 个答案: