Question

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

谢谢大家的帮助！

Answer 1

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

Answer 2

要在第一个中插入新的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 );

    });

}

Answer 3

您可以使用wrap用div包装span元素

e.g。

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

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

把内容放在一个div里面

3 个答案: