我們如何動態地編寫jquery選擇器？

Question

我想在一個名爲activity-div的主div中添加一些使用jQuery的div，然後爲每個div添加一個列表。但是每個div的列表項不一樣。所以我認爲我需要給每個div的id，然後使用該id我可以訪問div並將該列表項放入該div。我使用此jQuery代碼：

for (i=0;i<obj.length;i++){ 
    $('#activity-div').append('<div class="area" id="area"'+i+'><h3><a href="#">'+obj[i].name+'</a></h3></div>'); 

     } 

允許假設obj.length是5。然後5周的div將被添加。他們的ID將是區域1，區域2，區域3，區域4和區域5。我的問題是我怎樣才能得到這些div由id使用循環。我知道，一個div可以使用此訪問：

('#area1').append('<ul><li></li></ul>'); 

我要訪問的所有div我使用循環創建，然後在添加列表。我怎樣才能做到這一點？那會是什麼語法？我試過

('#area'+i).append('<ul><li></li></ul>'); 

但它沒有工作。我是jQuery的新手，無法找到任何聯機幫助。提前致謝。

Answer 1

$('#area'+i).append();應該努力！

你做在你的代碼中的錯誤：

append('<div class="area" id="area"'+i+'><h3> 

應該是：

append('<div class="area" id="area'+i+'"><h3> 

Answer 2

問題出在您的for循環中，id屬性未正確添加數字值。

根據您當前的代碼，它會出來id="area"1而不是id="area1"

這是正確的代碼：

$('#activity-div').append('<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>'); 

也只是在底部更添加到此您的追加行中缺少jQuery的$標識符和應該像

$('#area1').append('<ul><li></li></ul>'); 

Answer 3

您也可以選擇所有id=area<num>的div jQuery選擇的：

$('div[id^="area"]').append('<ul><li></li></ul>'); 

這將選擇所有以「區域」開頭並帶有ID的div元素並附加一個ul元素。

文檔的jQuery選擇可以在這裏找到：http://api.jquery.com/category/selectors/

Answer 4

這是一個更好的做法是建立自己的DOM插入到一個字符串，並添加他們都在同一時間。代碼中添加了DIV的代碼中也有錯誤。試試這個：

var insertion = ""; 
for (i=0;i<obj.length;i++){ 
    insertion += '<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>'; 
} 
$('#activity-div').append(insertion); 

Answer 5

讓假設obj.length是5。然後5個格將被添加。並且他們的id將是area1，area2，area3，area4和area5 ...

錯誤。看看你的代碼在這裏：

for (i=0;i<obj.length;i++){ 
    $('#activity-div').append('<div class="area" id="area"'+i+'><h3><a href="#">'+obj[i].name+'</a></h3></div>'); 
} 

如果有5個obj學分，他們將根據i編號。在for循環中，您將得到值0,1,2,3和4，因爲i++直到循環重複之前的最後一步纔會發生（即，i<obj.length的評估發生在循環之前，而i++之後發生）。

與id="area"'+i+'除非這個問題（這應該是id="area'+i+'"），如果你希望從值1至5，相應地調整你的for循環：

for(i=1; i<=obj.length; i++) { 
    $('#activity-div').append('<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>'); 
} 

如果再要添加的列表中，你可以這樣做：

for(i=1; i<=obj.length; i++) { 
    $('#activity-div').append('<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>'); 
    $('#area'+i).append('<ul><li></li></ul'); 
} 

有沒有真正的理由來創建循環第二和位置應嘗試只在創建後追加到$('#area'+i)。如果你有問題，使用firefox和firebug可能會有所幫助。您可以添加行如：

console.log(i); 

到for循環爲它增加在各階段的跟蹤i的值。

Answer 6

完全跳過ID，只是按類和指數選擇：

$("#activity-div .area").eq(i).append("<ul><li></li></ul>"); 

或者，更好的是，跳過不必要的jQuery查找並只保留到元素的參考。

areas[i].append("<ul><li></li></ul>"); 

如果有可能你的循環合併成一個，這將是理想的：

var areas = []; 
for (i=0;i<obj.length;i++) { 
    var area = $('<div class="area"><h3><a href="#">'+obj[i].name+'</a></h3></div>'); 
    $('#activity-div').append(area); 
    areas.push(area); 
} 

然後通過索引來訪問該地區

for (i=0;i<obj.length;i++) { 
    var area = $('<div class="area"><h3><a href="#">'+obj[i].name+'</a></h3></div>'); 
    area.append("<ul><li></li></ul>"); 
    $('#activity-div').append(area); 
} 

但是，這些都不解決方案真的爲你做 - 沒有你實際添加列表項。我會使用$.each迭代obj，然後在同一個循環中追加列表項，避免循環兩次。這樣吧，假設你的列表中的項目也包含在obj[i]：

$.each(obj, function() { 
    var list = $('<div class="area"><h3><a href="#">'+this.name+'</a></h3><ul></ul></div>') 
     .appendTo("#activity-div") 
     .find("ul"); 
    $.each(this.listItems, function() { 
     list.append("<li>" + this.Name + "</li>"); 
    }); 
});