Замена содержимого div с помощью jQuery

Вот мой HTML:

<div class="large">
    <img src="/images/photos/Interior.jpg" alt="The interior" style="[...]" />
    <div class="caption">The interior</div>
</div>
<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" style="[A different ...]" />
    <div class="caption">A bedroom</div>
</div>

После нажатия div.small я бы хотел, чтобы изображения и подписи менялись местами в div-контейнерах. Загвоздка в том, что я не могу просто поменять местами src, так как есть набор встроенных стилей, которые необходимо сохранить. Наконец, когда изображения поменялись местами, я хочу применить свою пользовательскую функцию .fitToParent() к ним обоим.

Как мне это сделать?


javascript html jquery swap
person Eric    schedule 04.09.2009    source источник
comment
Лол рофл и т.д.!! Я просто обнаружил, что ищу хороший способ поменять содержимое div с помощью jQuery. И посмотрите, кто ответил на этот вопрос.....   -  person Ropstah    schedule 19.03.2010

Ответы (3)


arrow_upward
1
arrow_downward 

function swapContent(){
   var tempContent = $("div.large").html();
   $("div.large").empty().html($("div.small").html());
   $("div.small").empty().html(tempContent);   
}

<div class="large">
    <img src="/images/photos/Interior.jpg" alt="The interior" style="[...]" />
    <div class="caption">The interior</div>
</div>
<div class="small" onclick="swapContent()">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" style="[A different ...]" />
    <div class="caption">A bedroom</div>
</div>

Надеюсь, поможет.

person Tarik    schedule 04.09.2009

arrow_upward
0
arrow_downward

Немного измените разметку:

<div id="large">

<div id="small">

И тогда в Javascript вы можете сделать:

var swap = function(fromId, toId){
    var temp = $(toId).html();
    $(toId).html($(fromId).html());
    $(fromId).html(temp);
}

Очевидно, что это можно очистить, но вы поняли идею.

person Justin Niessner    schedule 04.09.2009
comment
Переход на id невозможен, так как существует более одного div.small - person Eric; 04.09.2009

arrow_upward

arrow_downward

person    schedule
comment
Спасибо за помощь. Кто-нибудь знает, почему я теряю ваши разрывы строк, вставляя это в Visual Studio? - person Eric; 04.09.2009
comment
Это прекрасно работает, НО вы теряете все события, связанные с div (например, controlName.change()). Использование detach и append сохраняет события. См. stackoverflow .com/a/9719297/1359088 - person James Toomey; 25.11.2014