Javascript 具有相同id错误的div 数据类型 按数据类型优化搜索

上面的div（tagTree1）出现在分区ad中

<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> 

地理位置

按地理位置优化搜索

在另一个分区搜索中出现了newTagTree1分区。但两者都具有相同的功能，可以在其中生成子分区，这些子分区写在js文件中。所有子分区在js文件中动态生成。它们都使用相同的函数来生成子div。当我在同一页中使用它们时，我遇到了问题。如果一个工作正常，那么另一个就不行。有人能告诉我我在这件事上犯了什么错误吗

提前谢谢

<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>

$.getJSON（'/api/TagsApi/Children？id=800002'，函数（数据）{
//$（tagDiv.empty（）；
$。每个（数据、功能（i、项）{
$（“#tagTree1”）.append（tagTabBuilder（item））；
});
$（“#tagTree1”）.tabs（“#tagTree1 div.pane”，{api:true，tabs:'a'，effect:'slide'，onClick:buildChildren，initialIndex:0}）；
});
函数tagTabBuilder（tagData）{
var str=“”+tagData.NAME；
如果（tagData.count==0）{
str+=“（“+tagData.count+”）”+“
”；
}否则{
str+=“（“+tagData.count+”）“+”
”；
}
str+=”；
返回str；
}

我的猜测是，当它们生成子div时，它们使用的是相同的ID方案。因此，它们中的任何一个都可以自行生成子div，但是当它们都包含时，就会发生ID冲突。答案是修改子生成代码，例如，将父div的id作为子div id的第一部分

---

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

请提供函数的代码。@MCL是您想要的吗？我仍然缺少

buildChildren（）

函数。另外，你可以在函数体中缩进代码。很抱歉，MCL是一个非常长的代码，甚至buildchildren调用了另外两个函数。我真的很感激你的关心。但我需要儿童节目组的id是广告和搜索节目组的id。我需要他们使用这些ID从数据库中检索数据。还有其他选择吗？有。将其存储在id属性以外的其他内容中。id属性是特殊的。它是为在页面上快速查找节点而优化的，但它是唯一的-这意味着不允许在同一页面上有两个具有相同id的节点。没有其他属性以相同的方式是唯一的。如果您愿意，您可以使用class，或者甚至只选择一个新的属性名，然后使用它（这会使访问有点困难，但不会太多，而且它确保它不会“干扰任何其他内容”），我认为使用

类来存储自定义数据也不是一个好的做法。您可以定义一个属性，如
数据id
。无论如何，如果数据总是相同的，为什么要将其存储在每个子对象中？为什么不在他们的父母身上放一次呢？数据并不总是一样的。每个子div都有不同的ID。问题是整个列表在
tagTree1
中显示一次，在
newTagTree1
中显示一次。因此，碰撞。将其存储在
类中是否是一个好主意取决于它是什么类型的数据。在这种情况下，我倾向于同意你的观点，但OP可能希望采用更简单、更丑陋的方式。@BenBarden我现在明白了，这就是你浏览帖子的结果；）我当然不认为定义数据属性比定义类更难。尤其是jQuery支持轻松访问那些使用
$.data（）
$.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;
}