console
var xml = "<procedure><mainProcedure><proceduralStep><title>工艺流程</title><para><randomList><listItem><para></para></listItem></randomList></para></proceduralStep><proceduralStep><title>施工工艺要求</title><proceduralStep><title>标题</title><para>WQEQWE</para></proceduralStep><proceduralStep><title>标题</title><para>QWEQWEQW</para></proceduralStep><proceduralStep><title>标题</title><para>ASDASD</para><proceduralStep><title>标题</title><para>ASDSADAS</para></proceduralStep></proceduralStep></proceduralStep><proceduralStep><title>人员资格</title><para></para></proceduralStep></mainProcedure></procedure>"
xmlToHtml(xml);
function xmlToHtml(xml) {
var dom = $($(xml).children()[0]).children()[1]
paraToText(dom);
proceduralstepToNull(dom);
TitleToH3(dom);
proceduralstepToDiv(dom);
paraToDiv(dom);
console.log(dom)
$("#par-0002").html(dom)
}
function paraToText(dom) {
var paras = $(dom).find("proceduralstep").siblings("para");
if (paras.length != 0) {
$(paras[0]).replaceWith(paras[0].innerHTML);
}
paras = $(dom).find("proceduralstep").siblings("para");
if (paras.length != 0) {
paraToText(dom);
}
}
function proceduralstepToNull(dom) {
var proceduralstep = $(dom).find("proceduralstep");
for (var i = 0; i < proceduralstep.length; i++) {
var parent = $(proceduralstep[i]).parent()[0];
var children = $(parent).children("proceduralstep");
if (proceduralstep[i] == children[0]) {
continue;
} else {
var innerHTML = proceduralstep[i].innerHTML;
var appends = $(proceduralstep[i].innerHTML);
for (var j = 0; j < appends.length; j++) {
children[0].append(appends[j]);
}
}
}
var proceduralstep = $(dom).find("proceduralstep");
for (var i = 0; i < proceduralstep.length; i++) {
var parent = $(proceduralstep[i]).parent()[0];
var children = $(parent).children("proceduralstep");
for (var j = 0; j < children.length; j++) {
if (children.length > 1) {
$(children[1]).remove();
} else {
break;
}
}
}
}
function TitleToH3(dom) {
var h3 = $(dom).find("title");
if (h3.length != 0) {
$(h3[0]).replaceWith("<h3 class=\"h3item\">" + h3[0].innerHTML + "</h3>");
}
h3 = $(dom).find("title");
if (h3.length != 0) {
TitleToH3(dom);
}
}
function proceduralstepToDiv(dom) {
var proceduralstep = $(dom).find("proceduralstep");
if (proceduralstep.length > 0) {
$(proceduralstep[0]).replaceWith("<div class=\"item\"><div class=\"reset\">" + proceduralstep[0].innerHTML + "</div></div>");
}
proceduralstep = $(dom).find("proceduralstep");
if (proceduralstep.length > 0) {
proceduralstepToDiv(dom);
}
}
function paraToDiv(dom) {
var para = $(dom).find("para");
if (para.length > 0) {
$(para[0]).replaceWith("<div class=\"item\">" + para[0].innerHTML + "</div>")
}
}
<div class="reset">
<h3 class="h3item">工艺流程</h3>
<ul id="par-0001">
<li></li>
</ul>
<h3 class="h3item">施工工艺要求</h3>
<div class="item" id="par-0002"><br/></div>
<h3 class="h3item">人员资格</h3>
<div class="item" id="par-0003"><br/></div>
</div>
.reset {
line-height: 1.6;
counter-reset: itemcounter;
border: 1px dashed lightgray;
}
.item > .reset {
padding-left: 20px;
}
.h3item:before {
content: counters(itemcounter,
".") ".";
counter-increment: itemcounter;
}