Javascript循環迭代問題

-1

我想運行一個for循環，該循環將生成一個包含單個鏈接的新div（包含'container'類）。例如。第一個div會顯示'link6.php'，第二個div會顯示'link5.php'等等。但是，目前看起來循環在每個div中都已經耗盡了整個循環（我附上了一張顯示這個的圖片）。Javascript循環迭代問題

for (var i = 6; i > 0; i--) { 
    $('#everything').append('<div class="container"></div>'); 
    var link = "link" + i + ".php" + "<br />"; 
    $('.container').append(link); 
}

非常感謝你提前。我是新的在這和你的幫助是非常感謝;）

來源

2015-10-15 ar002

你本來應該有一個見解查看jQuery文檔並瞭解他們關於DOM選擇的規範。不過，我可以幫助你。 – Jason

對不起，@EnglishMaster我是新來的！非常感謝您的幫助！ – ar002

問題是，你附加div後，你選擇所有.container元素並將文本追加到每個。似乎沒有理由不能做到以下幾點。

for (var i = 6; i > 0; i--) { 
    $('#everything').append('<div class="container">link'+i+'.php<br /></div>'); 
}

來源

2015-10-15 22:55:56

非常感謝！我用這個，它工作得很好。比我所得到的要簡單得多...:) – ar002

不客氣，很高興我能提供幫助。 –

-2

你給每個div的類「容器」，然後運行的append（）上的所有.containers。

您需要給div一個唯一的ID，或直接由對象引用它。作爲一個例子：

for (var i = 6; i > 0; i--) { 
    $('#everything').append('<div class="container'+i+'"></div>'); 
    var link = "link" + i + ".php" + "<br />"; 
    $('.container'+i).append(link); 
}

來源

2015-10-15 22:56:35

說實話，這很好，但我不推薦它。在這種情況下使用類沒有意義。 – Jason

問題是因爲每次你做$('.container').append(link);，該$('.container')收集所有現有的div包括在以前的迭代加入的影片並附加你的鏈接到每個。

而不是重新收集它們，重用對容器的現有引用。您可以鏈接append和appendTo。

for (var i = 6; i > 0; i--) { 
 
    $('<div class="container"/>') // create container 
 
    .append("link" + i + ".php") // append container with link 
 
    .appendTo('#everything'); // append container to everything 
 
}

#everything { 
 
    padding: 10px; 
 
    border: 1px solid blue; 
 
} 
 
.container { 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="everything"></div>

來源

2015-10-15 22:56:41 Joseph

-1

這是我對你的代碼的建議。我建議你首先緩存一些東西，並理解jQuery的DOM選擇是如何工作的。

var everythingCached = $('#everything'); 
var container = $('<div class="container"></div>'); 

for (var i = 6; i >0; i--) { 
    var cached = everythingCached.append(container); 
    var link = "link" + i + ".php" + "<br />"; 
    cached.append(link); 
}

https://jsfiddle.net/47g4f14p/

來源

2015-10-15 22:59:39 Jason

當你做$(".container").append()，其追加到每 DIV與class="container"，不僅剛剛追加在這個循環中的一個。\

簡單的方式來解決，這是將link添加到#everything中。

for (var i = 6; i > 0; i--) { 
    var link = "link" + i + ".php" + "<br />"; 
    $('#everything').append('<div class="container">' + link + '</div>'); 
}

或者你可以創建容器作爲對象：

$('#everything').append($('<div>', { 
    "class": "container", 
    html: "link" + i + ".php<br/>" 
});

，或者你可以在容器分配給一個變量，並追加到它：

var container = $('<div class="container">').appendTo("#everything"); 
var link = "link" + i + ".php" + "<br />"; 
container.append(link);

來源

2015-10-15 22:59:40 Barmar

謝謝@Barmar！ – ar002

Javascript循環迭代問題

回答

相關問題