把內容放在一個div類內

我有一個簡單的問題，我有一個ID與一些ID，並在裏面有一些不同的內容，以一些跨度分隔符結束，我希望他們把類放在一個div幻燈片，反正這裏是結構，使之更加明確：把內容放在一個div類內

<div id="adv"> 
content 1 
<span class="separator"></span> 
content 2 
<span class="separator"></span> 
etc... 
</div>

，但我希望它有這樣的結構：

<div id="adv"> 
<div class="slide"> 
    content 1 
    <span class="separator"></span> 
</div> 
<div class="slide"> 
    content 2 
    <span class="separator"></span> 
</div> 
etc... 
</div>

BTW，不存在與類分隔符跨度沒有必要，只是含量足夠對我來說，裏面有一張幻燈片

謝謝大家的幫助！

來源

2013-03-05 Bato Dor

它是什麼樣的內容？如果你能分享一個真實的例子，你會幫助我們幫助你！ – Shef 2013-03-05 22:52:38

@shef在內容中只有一些文本和鏈接（可以通過順序進行更改），但是所有內容都被這個跨度與類分隔符 – 2013-03-05 22:54:11

@Vega對不起雖然不知道，但:)即使沒有經驗的jQuery和JavaScript ，因此我想，也許有一個簡單的方法 – 2013-03-05 22:54:42

$("#adv").html( 
     $.map(
      $("#adv").html().split('<span class="separator"></span>'), 
      function(content) { 
       return '<div class="slide">' + content + '<span class="separator"></span></div>'; 
      } 
     ).join("") 
    )

來源

2013-03-05 23:15:24

忘了加入部分，但現在編輯。 – 2013-03-05 23:23:02

謝謝！ :)你做到了！ – 2013-03-05 23:24:56

這是它的小提琴：http://jsfiddle.net/by3Ws/1/ – 2013-03-05 23:25:15

-1

您可以使用包裝用DIV

如來包裝你span元素

$(document).ready(function(){ 
    alert($('#adv').html()); 
    $('.separator').wrap('<div class="slide">'); 
    alert($('#adv').html()); 
});

讓我創建一個快速小提琴，並顯示所期望的結果

來源

2013-03-05 22:54:57 jsshah

這將無法正常工作，因爲它不會包裝'內容1' – 2013-03-05 22:55:55

傢伙你不必是那個意思:)與缺陷 – 2013-03-05 22:58:25

多數民衆贊成真的......我只是看到......它不會包裝的內容......它只會包裹跨度......我誤讀了HTML ..我以爲他想將跨度中的內容移動到將圍繞它的div – jsshah 2013-03-05 22:58:45

到剛剛在第一個插入新的div，你可以使用這樣的事情：

$("#adv").append(createNewDiv("foo")); 
$("#adv").append(createNewDiv("bar")); 

function createNewDiv(content) { 

    var $div = $('<div class="slide">' + content + '</div>'); 
    var $span = $('<span class="separator"></span>'); 

    $div.append($span); 

    return $div; 

}

要改變你的代碼，你可以使用類似：

cleanAndBuild($('#adv')); 

function sliceIt($divToSlide) { 

    var html = $divToSlide.html(); 
    var sliceStart = 0; 
    var i = 0; 
    var slices = []; 

    while (true) { 

     // getting the index to slice to. 
     var sliceEnd = html.indexOf('</span>') + 7; 

     // -1 +7 (-1 not found, 7 of </span> size (in chars) 
     if (sliceEnd == 6) { 
      break; 
     } 

     // inserting the new slice 
     slices.push(html.substring(sliceStart, sliceEnd)); 

     // removing sliced piece 
     html = html.substring(sliceEnd, html.length); 

    } 

    return slices; 

} 

function cleanAndBuild($divToCleanAndBuild) { 

    // getting the slices... 
    var slices = sliceIt($divToCleanAndBuild); 

    // cleaning the main container 
    $divToCleanAndBuild.html(""); 

    // iterating over the slices, creating a new div, putting the slice inside it and 
    // appending it to the container 
    slices.forEach(function(el) { 

     var $slideDiv = $('<div class="slide"></div>'); 
     $slideDiv.append(el); 
     $divToCleanAndBuild.append($slideDiv); 

    }); 

}

來源

2013-03-05 23:02:57 davidbuzatto

把內容放在一個div類內

回答

相關問題