具有相同id错误的Divs

Question

<div id="tagTree1" class="span-6 border"  style='width:280px;height:400px;overflow:auto;float:left;margin:10px; '>
    <a class="tabheader" style="font-size:large">Data Type</a><br />
    <div class="pane">Refine search by Data Type</div>
</div> 

上面的div(tagTree1)出现在分区广告中。

<div id="newtagTree1" class="span-6 border"  style='width:200px;height:400px;overflow:auto;float:left'>
    <a class="tabheader"><strong>Geographic Location</strong></a><br />
    <div class="pane"><strong>Refine search by geographic location</strong></div>
</div>

newTagTree1部门出现在另一个部门搜索中。但是两者都具有相同的功能，可以在它们内部生成子划分，这是在js文件中编写的。在js文件中动态生成的所有子分区。它们都使用相同的函数生成子div。当我在同一页中使用它们时，我会遇到问题。如果一个运行得很好，那么另一个就不行。有谁能告诉我我在这里做的错误吗？

提前谢谢。

$.getJSON('/api/TagsApi/Children?id=800002', function (data) {
    //$(tagDiv).empty();

    $.each(data, function (i, item) {
        $("#tagTree1").append(tagTabBuilder(item));
    });

    $("#tagTree1").tabs("#tagTree1 div.pane", { api: true, tabs: 'a', effect: 'slide', onClick: buildChildren, initialIndex: 0 });
});


function tagTabBuilder(tagData) {
    var str = "<input type='checkbox' name='tagchkbox[]' value='" + tagData.ID + "' onClick='startQuery()' /><a class='tabheader '>" + tagData.NAME;

    if (tagData.count == 0) {
        str += " (<span class='el_count' id='t" + tagData.ID + "'>" + tagData.count + "</span>)" + "</a><br/>";
    } else {
        str += " (<span class='el_count' id='t" + tagData.ID + "'><strong>" + tagData.count + "</strong></span>)" + "</a><br/>";
    }
    str += "<div id='tid-" + tagData.ID + "' class='pane tag'><!--Loading subtags. . .<img src='/assets/modules/gaiaModule/shared/images/load-small.gif' />--></div>";
    return str;
}

Answer 1

我的猜测是，当它们生成子div时，它们使用相同的ID方案生成它们。因此，它们中的任何一个本身都可以很好地生成子div，但是当它们都包含在其中时，就会出现ID冲突。答案是修改子代代码以例如包括父div的id作为子div的id的第一部分。

或者，如果您不需要在javascript的其他部分使用它们，可以完全去掉子div ids。一般来说，我发现最好避免在生成的节点中使用id属性，而是使用类或类似的属性。