我在数组中有一个未知数量的元素,我需要循环才能动态创建一个可折叠集。我想知道是否有可能每次通过循环动态创建集合中元素的ID,因此我需要追加的Groups和Items的ID是唯一的,然后将动态ID引用到.append()项目。
以下是我将附加的可折叠集:
$('#dealersContentDiv').append('<div id="colapseDiv" data-role="collapsible-set" data-mini="true"></div>');
我可以在以下行中动态创建ID“group1”:
$('#colapseDiv').append('<div id="group1" data-role="collapsible"></div>');
和“item1”在以下行中:
$('#group1').append('<ul id="item1" data-role="listview" data-inset="true">');
然后,如果可能,我将如何引用这些ID以附加到它们,如下所示:
// how do I reference "group1".append()
$('#group1').append('<ul id="item1" data-role="listview" data-inset="true">');
// how do I reference "item1".append()
$('#item1').append('<li><a href="' + myData.Dealers[i].URL + '">' + myData.Dealers[i].name + '</a></li>');
编辑:要包含一个动态创建ID的循环示例:
var groupPrefix = 'group';
var groupId = '';
var itemPrefix = 'item';
var itemId = '';
for (i = 1; i < number_of_items; i++) {
// dynamically create the groupId
groupId = groupPrefix + i; // group1, group2, ...
// use the groupID
$('#colapseDiv').append('<div id="' + groupId + '" data-role="collapsible"></div>');
// dynamically create the itemId
itemId = itemPrefix + i; // item1, item2, ...
// reference the groupId.append(), use the itemId
$(groupID).append('<ul id="' + itemId + '" data-role="listview" data-inset="true">');
}
段:
$('#dealersContentDiv').append('<div id="colapseDiv" data-role="collapsible-set" data-mini="true"></div>');
// start loop ...
// the first time through the loop, the dynamically created IDs will be "group1" and "item1"
$('#colapseDiv').append('<div id="group1" data-role="collapsible"></div>');
$('#group1').append('<h2>' + myData.Dealers[i].area + '</h2>');
$('#group1').append('<ul id="item1" data-role="listview" data-inset="true">');
$('#item1').append('<li><a href="' + myData.Dealers[i].URL + '">' + myData.Dealers[i].name + '</a></li>');
$('#item1').append('.... // append mutliple <li>s
// the next time though the loop, "group1" changes to "group2" and "item1" changes to "item2"
$('#colapseDiv').append('<div id="group2" data-role="collapsible"></div>');
$('#group2').append('<h2>' + myData.Dealers[i].area + '</h2>');
$('#group2').append('<ul id="item2" data-role="listview" data-inset="true">');
$('#item2').append('<li><a href="' + myData.Dealers[i].URL + '">' + myData.Dealers[i].name + '</a></li>');
$('#item2').append('.... // append mutliple <li>s
// now "group3" and "item3"
$('#colapseDiv').append('<div id="group3" data-role="collapsible"></div>');
$('#group3').append('<h2>' + myData.Dealers[i].area + '</h2>');
$('#group3').append('<ul id="item3" data-role="listview" data-inset="true">');
...
// end loop.
$('[data-role=content]').trigger('create');
$('[data-role=content]').trigger('pagecreate');
感谢您的任何见解。
答案 0 :(得分:0)
如果要在一个循环中构建所有可折叠div,并且每个可折叠内圈和内循环中的项目,则实际上不需要分配ID。只需对您创建的项目使用jquery变量并附加到它们。
参见 DEMO
当我创建DOM元素时,我将它们分配给jQuery变量(collSetDiv,divCol,ul,li等)。然后在完成所有循环之后,整个可折叠集将附加到页面中的现有父div。
var groupPrefix = 'group';
var groupId = '';
var itemPrefix = 'item';
var itemId = '';
$(document).on("pagebeforeshow", "#page1", function(){
var colSetDIV = $('<div id="colapseDiv" data-role="collapsible-set" data-mini="true"></div>');
for (var i=0; i < 3; i++){
groupId = groupPrefix + i;
var divCol = $('<div id="' + groupId + '" data-role="collapsible" ></div>');
divCol.append('<h2>Dealer' + i + '</h2>');
var ul = $('<ul data-role="listview" data-inset="true"></ul>');
for (var j=0; j < 4; j++){
var li = $('<li><a href="#">Dealer' + i + ' Name' + j + '</a></li>');
ul.append(li);
}
divCol.append(ul);
colSetDIV.append(divCol);
}
$('#dealersContentDiv').append(colSetDIV);
colSetDIV.collapsibleset().trigger("create");
});