2013-04-29 2 views
1

Я новичок в JQueryизменить HTML элемент из дел до уль с помощью JQuery

я хочу, чтобы изменить какое-либо ДИВ содержит те классы для тех неотформатированных списков:

.view-контент --- -> УЛ '

.view-строка ----> 'LI'

.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 заранее

+1

Любая конкретная причина, почему вам нужно сделать это с помощью javascript? Вы можете просто заменить все это сразу, используя инструмент «Найти и заменить» в Dreamweaver, Notepad ++, Word, сделайте выбор. Звучит намного проще и меньше нагрузки для клиента. –

+0

Любые конкретные причины, по которым вы не можете создать простейший тестовый пример? –

+0

@kcdwayne Я использую drupal 7, так что я просто не могу получить страницу – YassineEdouiri

ответ

0

Это уже ответили здесь - how to change an element type using jquery Просто создать функцию, чтобы перебрать свои дивы.

+0

tnks для ответа^_^ – YassineEdouiri

+0

oki, done^__^ – YassineEdouiri

+0

lol ... это тот же самый ответ, который я связал в своем ответе, за исключением того, что этот ответ - это просто ссылка, а моя на самом деле показывает вам, как решить вашу ситуацию. Почему это неприемлемо? –

3

Ниже будет делать то, что вы ищете:

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

+0

это так просто в использовании, отличный пост приятель ^^ – YassineEdouiri

+0

Мое удовольствие. :) –