如何包装两个动态HTML元素? [英] How to wrap two dynamic HTML elements?

问题描述

我在下面的jquery中创建了动态html结构

I have the below jquery where i have created the dynamic html structure

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) {
  if (!$("#aZContent ul." + val.code).is("*")) {
    $("<ul />", {
        "class": val.code,
        "html": "<li>" + val.name + "</li>"
      })
      .appendTo("#aZContent ol")
      .before('<b class=' + val.code + '>' + val.code + '</a></b>');
  } else {
    $("b." + val.code).each(function() {
      if (this.textContent === val.code) {
        $(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>

如何用"li"包装"b"和"ul"元素

How to wrap the "b" and "ul" element with "li"

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

推荐答案

尝试利用$.each()，.appendTo()，.append();将ol li，b class设置为data的code属性.

Try utilizing $.each(), .appendTo(), .append(); setting ol li , b class to code property of 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>

这篇关于如何包装两个动态HTML元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！