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に新しい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 に答える