Question

我是jquery的新手

我想将任何包含这些类的div更改为那些未格式化的列表：

.view-content -----＆gt; 'ul'

.view-row ----＆gt; '礼'

.view-organigramme-departements ---＆gt; '<ul><li></li></ul>'

来源：

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

期望的结果：

<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

以下内容可以满足您的需求：

(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');

请注意，插件代码改编自this answer。有关工作示例，请参阅this jsFiddle。

Answer 2

这里已经回答了问题 - how to change an element type using jquery 只需创建一个函数来迭代你的div。

使用jquery将html元素从div更改为ul

2 个答案: