分割線和span標籤添加

Question

在幻燈片如果母公司是.cycle-slide我掙扎得到以下段落文本例如，從這個

<p>First line<br>leads to second<br>and then a third</p> 

去這個使用JavaScript。我想每個<br>到p拆分，然後包裝在<span>

<p><span>First line</span><br><span>leads to second</span><br><span>and then a third</span></p> 

我得到這個文本，但它只能說明在執行console.log（）

jQuery('document').ready(function(){ 
    jQuery.each(jQuery(".cycle-slide"), function() { 
     var data = jQuery(this).find('p').html().split('<br>'); 
     jQuery.each(data, function() { 
      console.log(data); 
      jQuery(data).wrap('<span>'); 
     }); 
    }); 
}); 

Answer 1

假設p元素只包含textNode s和br元素，而不是拆分html內容並重置修改的標記，您可以使用.filter()方法選擇文本childNodes和.wrap()方法來包裝匹配的節點。

// `.contents()` method returns childNodes of the selected elements 
$('p').contents().filter(function() { 
    // `nodeType` of the `textNode` is 3 
    return this.nodeType === 3; 
}).wrap('<span/>'); 

http://jsfiddle.net/3Ky7S/

Answer 2

您應該更新元素的文本..

 jQuery('document').ready(function(){ 
     jQuery.each(jQuery(".cycle-slide"), function() { 
      var data = jQuery(this).find('p').html().split('<br>'); 
      jQuery.each(data, function() { 
       console.log(data); 
       this.text(jQuery(data).wrap('<span>')); 
      }); 
     }); 
    });