jquery - jQueryを使用してdivを別のdivに置き換える必要があります

Question

<div id="main">
    <div id="abc">
        <div>
            This is the div to be replaced
        </div>
    </div>
    <div id="xyz" style="display:none">
        <div>
            This is the div replaced
        </div>
    </div>
</div>

こんな感じであげました

$('#main').children('div:eq(0)').css('display','none')
$('#main').children('div:eq(0)').replaceWith($('#xyz').html())

しかし、出力を見ると、それを<div>This is the div replaced</div>親divとしてではなく、単独で取得します。<div id="xyz">

Answer 1

実際にトグル機能を探していると思います。

このフィドルを確認してください

$('#main').click(function(){
    $('#main>div').toggle();
});

Answer 2

http://api.jquery.com/html/

基本的にinnerHTML、タグ自体ではなく、$('#xyz') を取得しています。

やるだけ

$('#main').children('div:eq(0)').replaceWith($('#xyz'))

Answer 3

var isDisplayed = $("#main").find("#abc").css("display");
if(isDisplayed == "block"){
  $("#main").find("#abc").css("display","none");
  $("#main").find("#xyz").css("display","block");
}
else{
  $("#main").find("#abc").css("display","block");
  $("#main").find("#xyz").css("display","none");
}

Answer 4

代わりにこれを試してください

$('#main').find('div:eq(0)').css('display','none');
$('#main').children('div:eq(0)').replaceWith($('#xyz'));

指定$('#xyz').html()することで、div の内容のみを取得します。

詳細については、 jQuery ドキュメントreplaceWithを参照してください

Answer 5

これはあなたが望むことをするべきだと思います:

$('#main div:first').html($('#xyz').html())