Jquery - Seçili html etiketlerini

Question

değerine dizeyle değiştirin. Bazı html'yi kısa kodlara dönüştürmem gereken bir tinymce eklentisi üzerinde çalışıyorum. sınıf sütunlara ile

var content = '<div class="row"><div class="large-6 columns"><p>Content 1</p></div><div class="large-6 columns"><p>Content 2</p></div></div><p>Content between rows</p><div class="row"><div class="large-6 columns"><p>Content 3</p></div><div class="large-6 columns"><p>Content 4</p></div></div>'; 

ve [satır] İçeriği [/ satırın] içine sınıf satırla div'leri "dönüştürmek" isteyen ve div'ler:

ben html bu gibi bakarak bir dize var [col] İçeriği [/ col]. Yani bir her satır böyle outputtet olacaktır: html etiketlerini değiştirme ile ilgili nereden başlayacağını bilmeyen

'[row][col]<p>Content 1</p>[/col][col]<p>Content 2</p>[/col][/row]<p>Content between rows</p>[row][col]<p>Content 3</p>[/col][col]<p>Content 4</p>[/col][/row]' 

I have prepared a jsfiddle ama dont:

[row] 
    [col]Content[/col] 
    [col]Content[/col] 
[/row] 

Yani değişiminden sonra benim son dizesi şu şekilde görünecektir kısa kod etiketleri ile.

bazı jquery/javascript dahiler bu Bu jQuery bana saf javascript kullanarak yazmaya daha bir kaç satırları kaydeder, sırf bir jquery çözüm

Answer 1

:) çözmek için nasıl düşüncelerini paylaşmak istiyorum umuyorum.

temelde

1. bir boş div öğesi oluşturmak ve bu div içine html koyacağım. Bu jquery tarafından sağlanan DOM traversal ve manipülasyon api kullanmanıza olanak sağlar. Tüm .columns ve .rows öğelerinde arama yapın ve güncelleyin

2. .

Codepen'de basit bir çalışma örneği hazırladım. You can play with it.

html:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<p id="output"> 
</p> 

JS:

$(document).ready(function(){ 

    var content = '<div class="row"><div class="large-6 columns"><p>Content 1</p></div><div class="large-6 columns"><p>Content 2</p></div></div><p>Content between rows</p><div class="row"><div class="large-6 columns"><p>Content 3</p></div><div class="large-6 columns"><p>Content 4</p></div></div>'; 

    var $dataWrapper = $("<div>"); 
    $dataWrapper.html(content); //wrap up the data to convert in a div. 

    //for each column in container element 
    $dataWrapper.find('.columns').each(function(){ 
    var htmlInsideColumn = $(this).html(); 
    var convertedHtml = "[col]" + htmlInsideColumn + "[/col]"; 
    $(this).after(convertedHtml); //let's place the converted html right after this column element. 
    $(this).detach();       //remove this element. 
    }); 

    //for each row in container element 
    $dataWrapper.find('.row').each(function(){ 
    var htmlInsideColumn = $(this).html(); 
    var convertedHtml = "[row]" + htmlInsideColumn + "[/row]"; 
    $(this).after(convertedHtml); //let's place the converted html right after this row element. 
    $(this).detach();       //remove this element. 
    }); 

    $("#output").text($dataWrapper.html()); 


});