Захватите содержимое div и вставьте его в другое

Привет, ребята, я пытаюсь создать режим просмотра «zen view» для своих статей в блоге, поэтому хочу захватить только содержимое #single div (только содержимое статьи нет заголовка или siderbar и т. д.) и помещаем его в другой div с именем # zen-view, обратите внимание, что я использую WordPress.Захватите содержимое div и вставьте его в другое

Так я пытаюсь сделать этот код на данный момент:

<button class="zen">Read in Zen mode</button> // when clicked display #zen-view div 
<div id="zen-view"> // initialy the css of that div is set to display:none 
<p id="zen-content"></p> // the tag where the contet of the #single div will be load 
<button class="close" href="#">Close Zen mode</button> // when clicked close zen-view div 
</div>

и вот Jquery

$(function() { 

    $('.zen').click(function() { 
      $('#zen-view').show(); 
      ... how can i grab the content of #single div and put into #zen-content div? ... 
     }); 
    $('.close').click(function() { 
      $('#zen-view').hide(); 

     }); 
    });

Благодаря

источник

2012-06-21 FRA

Не связано с вашей проблемой, но почему вы используете классы («zen» и «close»), чтобы выполнять работу с идентификаторами? – nnnnnn

как я могу захватить содержание #single div и помещается в # zen-content div?

$('#zen-content').html($('#zen-content').html());

Если вы не хотите, чтобы переопределить #zen-content содержание:

$('#zen-content').append($('#single').html());

, или с простым ЯШ:

document.getElementById('zen-content').innerHTML += $('#single').html();

источник

2012-06-21 11:03:06 gdoron

++ 1 и теперь я напечатаю 30 символов! Кто -1-ing (Downvoting) :)) это? –

@Tats_innit. Я думаю, кто-то, кто уже достиг шапки и не против потерять одно очко .... ':)' – gdoron

lolz: P и как только я набрал свой предыдущий комментарий, мой +1 пропал LMAO его как игра в росомаху, если вы играли в техно-лагере или uni. : P (Бедные жители всегда имеют низкую руку) :) –

$('#zen-content').html($('#single').html());

источник

2012-06-21 11:03:43 Farahmand

демоhttp://jsfiddle.net/QRv6d/11/

Хорошо читать: http://api.jquery.com/html/

код

$(function() { 

    $('.zen').click(function() { 
      $('#zen-view').show(); 
      $('#zen-content').html($('#single').html()); 
      //... how can i grab the content of #single div and put into #zen-content div? ... 
     }); 
    $('.close').click(function() { 
      $('#zen-view').hide(); 

     }); 
    });

источник

2012-06-21 11:04:34

Как скопировать HTML-код в виде строки в другой элемент, как это было предложено в предыдущих ответах, вы можете клонировать фактическое DOM дерево, например:

$('#zen').append($('#single').children().clone());

на следующий HTML:

<div id="single"> 
    <div class="innerContent">Some content over here <i>with markup</i></div>  
</div> 
<div id="zen" />

Это, однако, требует, чтобы вы вложили содержимое сообщения в блоге в другой div, потому что без звонка в children() вы должны клонировать исходный div в виде блога, а не только из содержимого.

См. Также пример работы здесь: http://jsfiddle.net/N3wFH/.

источник

2012-06-22 06:42:16

Захватите содержимое div и вставьте его в другое

ответ

Смежные вопросы