jQuery appended () позиционирование - PullRequest
Новая
       9

jQuery appended () позиционирование

1 голос
/ 04 января 2012

Я должен удалить () несколько iems с моего сайта, а затем добавить () их обратно, но когда я добавляю их, они появляются в разных местах, а я хочу, чтобы они отображались точно в том же месте, где они раньше быть.

Есть ли какое-то исправление к этому?

Вот песочница, не стесняйтесь обновлять (обратите внимание, как изображение меняет положение после первого добавления):

http://jsfiddle.net/Zt9tZ/1/

Ответы [ 4 ]

5 голосов
/ 04 января 2012

Может быть, здесь есть какая-то дополнительная информация, которую я пропускаю, но зачем ее полностью удалять?Есть ли причина, по которой вы не можете просто использовать hide и show?

http://jsfiddle.net/Zt9tZ/10/

Проблема с добавлением заключается в том, что вы добавляете элемент как последний к родительскому элементу,Если по какой-то причине вам действительно нужно полностью удалить элемент, вы можете поместить на его место какой-то заполнитель.Возможно, с replaceWith и некоторым невидимым элементом, который позже будет снова заменен на оригинальный элемент.

В качестве альтернативы, вы можете отслеживать ближайшего брата и использовать insertBefore или insertAfter.

РЕДАКТИРОВАТЬ: Пример insertAfter: 

var image = jQuery(".image"); 
var prev;

jQuery("#remove").click(function(){
    prev = image.prev();
    image.remove();
});

jQuery("#append").click(function(){
    if(prev.length === 0){
        // element was first
        jQuery("#container").prepend(image);
    }else{
        image.insertAfter(prev);   
    }
})

http://jsfiddle.net/Zt9tZ/12/

EDIT2: Пример replaceWith: 

var image = jQuery(".image"); 
var replacement = $("<div></div>");

jQuery("#remove").click(function(){
    image.replaceWith(replacement);
});

jQuery("#append").click(function(){
    replacement.replaceWith(image);
})

http://jsfiddle.net/Zt9tZ/13/

3 голосов
/ 04 января 2012

В этом конкретном случае вместо этого следует использовать .prepend(), чтобы вернуть его в начало выбранного элемента, а не в конец.

1 голос
/ 04 января 2012

Я бы сделал абсолютную позицию CSS для изображения.

CSS 

.imageStatic
{
    position:absolute;
    left:20px;
    top:45px;
}

JavaScript 

var image = jQuery(".imageStatic"); 

jQuery("#remove").click(function(){
    var image = jQuery(".imageStatic").remove();
});

jQuery("#append").click(function(){
    jQuery("#container").append(image);
    $("#container img").addClass("imageStatic");
})

рабочий образец: http://jsfiddle.net/Zt9tZ/9/

0 голосов
/ 04 января 2012

Вы можете использовать hide () и show () для достижения того же эффекта, но элементы останутся на месте.

По сути, так: http://jsfiddle.net/4JQ9m/

...