Как обернуть 2 динамических элемента html с помощью jquery?

Question

У меня есть ниже JQuery, где я создал динамический HTML структуру

var data = [{"name": "Afghanistan", "code": "A"},{"name": "AndorrA", "code": "A"},{"name": "Bouvet Island", "code": "B"},{"name": "Cook Islands", "code": "C"}]; 
 
$.each(data, function(key, val) { 
 
\t \t if (!$("#aZContent ul." + val.code).is("*")) { 
 
\t \t \t $("<ul />", { 
 
\t \t \t "class": val.code, 
 
\t \t \t "html": "<li>" + val.name + "</li>" 
 
\t \t \t }) 
 
\t \t \t .appendTo("#aZContent ol") 
 
\t \t \t .before('<b class=' + val.code + '>' + val.code + '</a></b>'); 
 
\t \t } else { 
 
\t \t \t $("b." + val.code).each(function() { 
 
\t \t \t if (this.textContent === val.code) { 
 
\t \t \t \t $(this).next("ul").append("<li>" + val.name + "</li>"); 
 
\t \t \t } 
 
\t \t \t }) 
 
\t \t } 
 
\t \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="aZContent"> 
 
\t <ol></ol> 
 
</div>

Как обернуть «Ъ» и элемент «уль» с «Ли»

<li> 
<b></b> 
<ul> 
    <li></li> 
</ul> 
</li> 

Answer 1

Try использования $.each(), .appendTo(), .append(); установка ol li, bclass в code свойство data

$(function() { 
 
    var data = [{ 
 
    "name": "Afghanistan", 
 
    "code": "A" 
 
    }, { 
 
    "name": "Bouvet Island", 
 
    "code": "B" 
 
    }, { 
 
    "name": "Cook Islands", 
 
    "code": "C" 
 
    }]; 
 

 
    $.each(data, function(key, val) { 
 
    if (!$("#aZContent ul." + val.code).is("*")) { 
 
     // append `<li>` to `ol` 
 
     $("<li />", { 
 
      // set `class` to `val.code` 
 
      "class": val.code, 
 
      // set `li` `html` to `b` , `ul` , `li` 
 
      "html": "<b class=" + val.code + ">" 
 
        + val.code + "</a></b>" 
 
        + "<ul><li>" 
 
        + val.name + "</li></ul>" 
 
     }) 
 
     .appendTo("#aZContent ol") 
 
    } else { 
 
     $("b." + val.code).each(function() { 
 
     if (this.textContent === val.code) { 
 
      // append `li` to `ul` 
 
      $(this).next("ul").append("<li>" + val.name + "</li>"); 
 
     } 
 
     }) 
 
    }; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="aZContent"> 
 
    <ol></ol> 
 
</div>