0

我有一个简单的问题，我有一个带有一些 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>

顺便说一句，在带有类分隔符的跨度中不需要，对我来说内容就足够了，在带有类幻灯片的 div 中

谢谢大家的帮助！

4

3 回答 3

4 
$("#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-05T23:15:24.927 回答
0

要在第一个中插入新的 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-05T23:02:57.143 回答
-1

您可以使用 wrap 将 span 元素与 div 一起包装

例如

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

让我创建一个快速小提琴并显示所需的结果

于 2013-03-05T22:54:57.030 回答