XML, получающий правильные узлы

Question

У меня есть два div, которые я создал из узлов XML «Item» # Option_Base-Shirt и # Option_Open-Main-Fabric-Collar. Я хочу, чтобы эти два div были заполнены «Sub» divs, поэтому у # Base-Shirt был бы один sub div и # Option_Open-Main-Fabric-Collar имел бы два sub div. В настоящий момент каждый элемент div имеет все три подвыбора.

XML

<Item name="None" title="Base-Shirt" alt="jpg"> 
    <Sub name="Pique" title="Open-Main-Fabric-Collar" alt="png"></Sub> 
</Item> 

<Item name="Pique" title="Open-Main-Fabric-Collar" alt="png"> 
    <Sub name="Jersey" title="Outside-Pocket-Left" alt="png"></Sub> 
    <Sub name="Main" title="Pocket" alt="png"></Sub> 
</Item> 

Javascript

//Add Subs to Option div 
$(document).find("Sub").each(function(){ 
    for (var i=0; i<=NumberItems; i++) { 
    $("#Option_"+ItemNames[i]) 
     .append('<div class="Sub" id="' + $(this) 
     .attr('title') +'"></div>'); 
    } 
}); 

Я думаю, что это должно быть что-то вроде этого, но это по-прежнему ставит все три дивы в каждом элементе DIV:

//Add Subs to Option div 
$(document).find("Item").each(function(){ 
    for (var i=0; i<=NumberItems; i++) { 
    $(this).find("Sub").each(function(){ 

      $("#Option_"+ItemNames[i]).append('<div class="Sub" id="' + $(this).attr('title') +'"></div>'); 

    }); 
    } 
}); 

Gett ing XML:

$(document).ready(function(){ 
// Load XML 
$.ajax({ 
    url: 'data.xml', 
    dataType: "xml", 
    success: parse, 
    error: function(){alert("Error: Something wrong with XML");} 
}); 

function parse(document){ 

//Get all item names Var=ItemNames (Base_Shit, Collar...) 
$(document).find("Item").each(function(){ 

Answer 1

Это, кажется, работает, я помещаю функцию внутри функции, которую я создаю в своих элементах div. Извините, я, наверное, не очень хорошо объяснил свой вопрос.

$(document).find("Item").each(function(){ 
    $(".Button").append('<div class="Item" id="' + $(this).attr('title') +'" name="' + $(this).attr('name') +'" alt="' + $(this).attr('alt') +'"><span>'+$(this).attr('title').replace(/\-/g, ' ')+'</span><div class="Fabric" id="Fabric_' + $(this).attr('title') +'"></div><div id="Option_' + $(this).attr('title') +'" class="Option"></div></div>'); 

    $(this).find("Sub").each(function(){ 
      $("#Option_"+$(this).parent().attr('title')).append('<div class="Sub" id="' + $(this).attr('title') +'"></div>'); 
    }); 


});