html元素从DIV改变使用jQuery

问题描述：

我想改变任何div包含这些类的格式化列表新UL：

.view内容--- - > 'UL'

.view排----> '礼'

.view-组织图-个省---> '<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>

TNKS提前

为什么你需要用javascript做到这一点的具体原因？您可以使用Dreamweaver中的“查找和替换”工具，记事本++，Word一次性全部替换它，随时挑选。听起来更容易，客户端的负载更轻。 – 2013-04-29 23:48:29

您无法创建最简单的测试用例的具体原因是什么？ – 2013-04-29 23:52:28

@kcdwayne我使用Drupal 7，所以我只是不能得到页面 – YassineEdouiri 2013-05-01 13:23:45

答

它已经在这里找到答案 - how to change an element type using jquery 只需创建一个功能，你的div迭代。

tnks的答案^ _^ – YassineEdouiri 2013-05-01 13:25:12

oki，done^__^ – YassineEdouiri 2013-05-31 18:46:08

大声笑...这是我在我的答案中完全相同的答案，除了这个答案只是一个链接，我的实际上告诉你如何解决你的情况。为什么不接受？ – 2013-05-31 20:31:28

答

下面将做你找什么：

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

这是如此简单易用，好帖子哥们^^ – YassineEdouiri 2013-05-01 13:19:13

我的荣幸。 :) – 2013-05-01 17:06:39

html元素从DIV改变使用jQuery

相关推荐