把内容放在一个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类内

回答

相关问题