change the html element from div to ul using jquery

Question

i'm new in jquery

i want to change any div contains those classes to those unformatted lists :

.view-content -----> 'ul'

.view-row ----> 'li'

.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>

Answer 1

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 .

Answer 2

这里已经回答了 - 如何使用 jquery 更改元素类型只需创建一个函数来遍历您的 div。