[英]change the html element from div to ul using jquery
i'm new in jquery我是 jquery 的新手
i want to change any div contains those classes to those unformatted lists :我想将包含这些类的任何 div 更改为那些未格式化的列表:
.view-content -----> 'ul'
.view-content -----> 'ul'
.view-row ----> 'li'
.view-row ----> 'li'
.view-organigramme-departements ---> '
<ul><li></li></ul>
'.view-organigramme-departements ---> '
<ul><li></li></ul>
'
the source :来源 :
<div class="view-content"><!-- <UL> -->
<div class="views-row views-row-1 views-row-odd views-row-first"><!-- <LI> -->
<a href="/ZurichIntranetProd/content/op%C3%A9ration-0">Opération</a>
<div class="view view-organigramme-departements view-id-organigramme_departements view-display-id-default view-dom-id-401dc87ab045747942dc42b9669bd629"><!-- <ul><li> -->
<div class="view-content"><!-- <UL> -->
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last"><!-- <LI> -->
<a href="/ZurichIntranetProd/content/it-delivery-0">- IT delivery</a>
<div class="view view-organigramme view-id-organigramme view-display-id-default view-dom-id-649f1ec1753ed6a97c093f67f2d6dcfc">
<div class="view-content"><!-- <UL> -->
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last"><!-- <LI> -->
<a href="/ZurichIntranetProd/content/amo-0">--AMO</a>
Chef du service: HAKKAL Sanaa
</div><!-- <LI> -->
</div><!-- </UL> -->
</div>
</div><!-- </LI> -->
</div><!-- </UL> -->
</div> <!-- </ul></li> -->
</div><!-- </LI> -->
<div class="views-row views-row-2 views-row-even views-row-last">
<a href="/ZurichIntranetProd/content/sinistre">Sinistre</a>
<div class="view view-organigramme-departements view-id-organigramme_departements view-display-id-default view-dom-id-c67ab28c33a24e8d6cef2bb463d98c1b">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<a href="/ZurichIntranetProd/content/dept-sinistre">- Dept. Sinistre</a>
<div class="view view-organigramme view-id-organigramme view-display-id-default view-dom-id-9f02698becf34ce2d341fa2b8c1155ef">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<a href="/ZurichIntranetProd/content/service-sinistre">--Service Sinistre</a>
Chef du service: Validateur IT
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- </UL> -->
desired Outcome :期望的结果 :
<ul class="view-content">
<li class="views-row views-row-1 views-row-odd views-row-first">
<a href="/ZurichIntranetProd/content/op%C3%A9ration-0">Opération</a>
<ul class="view view-organigramme-departements view-id-organigramme_departements view-display-id-default view-dom-id-401dc87ab045747942dc42b9669bd629">
<li>
<ul class="view-content">
<li class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<a href="/ZurichIntranetProd/content/it-delivery-0">- IT delivery</a>
<ul class="view view-organigramme view-id-organigramme view-display-id-default view-dom-id-649f1ec1753ed6a97c093f67f2d6dcfc">
<li>
<ul class="view-content">
<li class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<a href="/ZurichIntranetProd/content/amo-0">--AMO</a>
Chef du service: HAKKAL Sanaa
</li>
</ul>
</li>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="views-row views-row-2 views-row-even views-row-last">
<a href="/ZurichIntranetProd/content/sinistre">Sinistre</a>
<ul class="view view-organigramme-departements view-id-organigramme_departements view-display-id-default view-dom-id-c67ab28c33a24e8d6cef2bb463d98c1b">
<li>
<ul class="view-content">
<li class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<a href="/ZurichIntranetProd/content/dept-sinistre">- Dept. Sinistre</a>
<ul class="view view-organigramme view-id-organigramme view-display-id-default view-dom-id-9f02698becf34ce2d341fa2b8c1155ef">
<li>
<ul class="view-content">
<li class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<a href="/ZurichIntranetProd/content/service-sinistre">--Service Sinistre</a>
Chef du service: Validateur IT
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
The following will do what you're looking for:以下将做你正在寻找的:
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
if (!(this[0] && this[0].attributes))
return;
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
}
})(jQuery);
$('.view-row').changeElementType('li');
$('.view-content').changeElementType('ul');
$('.view-organigramme-departements').wrap('<ul />').changeElementType('li');
Note that the plugin code is adapted from this answer .请注意,插件代码改编自此答案。 For a working example, see this jsFiddle .
有关工作示例,请参阅此 jsFiddle 。
这里已经回答了 - 如何使用 jquery 更改元素类型只需创建一个函数来遍历您的 div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.