如何使用jquery包装2个动态html元素？ [英] How to wrap 2 dynamic html element using jquery?

问题描述

我有以下jquery，我已经创建了动态的html结构

  var data = [{name：Afghanistan，code：A}，{名称：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） （function（）{if（this.textContent === val.code）{$（this）.next（ul）。append（< li>+ val.name +< / li> ）;}}）}}）;  

  SRC =HTTPS：//ajax.googleapis。 com / ajax / libs / jquery / 1.11.1 / jquery.min.js>< / script>< div id =aZContent> < ol>< / ol>< / div>  

< >如何用li包装b和ul元素

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

解决方案

尝试利用 $ （）， .appendTo（）， .append（）;设置 ol li ， b class to 代码属性数据

  $ （）{var data = [{name：Afghanistan，code：A}，{name：Bouvet Island，code：B}，{name （*（＃aZContent ul。+ val.code）.is（*） ）{//将`< li>`添加到`ol` $（< li />，{//将`class`赋值为'val.code`class：val.code，// set `li``html`到`b``````````````````````````` ; / b>+< ul>< li>+ val.name +< / li>< / ul>}）.appendTo（＃aZContent ol）} else {$（ b。+ val.code）.each（funct ion（）{if（this.textContent === val.code）{//将`li`附加到`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>  

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>

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

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

解决方案

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>

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