Question

我在数组中有一个未知数量的元素，我需要循环才能动态创建一个可折叠集。我想知道是否有可能每次通过循环动态创建集合中元素的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');

感谢您的任何见解。

Answer 1

如果要在一个循环中构建所有可折叠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");
});

动态创建jQuery Mobile元素的ID，然后引用它们

1 个答案: