Movimentação de div

Boa tarde Galerinha!.
Estou tentando algo e não consegui creio que alguem consiga me ajudar, é algo simples.
Criei uma DIV ID=“xxxxx”, dentro da descrição do produto.
Quero agora movimentar essa div para em cima do valores dos produtos na pagina do produto.


tentei desta forma

Descrição do produto
<div id="MR1209402018">Mesa Secretaria Cinza Reta 15mm 1200x600 c/aba
<div>Mesa Secretaria – Maranello,</div>
</div>

// edição HTML Java Rodapé pagina produto
$(document).ready(function(){
$('#corpo .secao-principal .conteudo .row-fluid .sem-coluna .produto .span6 .principal. info-principal-produto').before($('#MR1209402018'));

})

Link do produto Aparador 1000x420x900 M40 Nogal - Evimero Home & Office

Olá!!

O ponto de “info-principal-produto” tem que estar junto, ele está no fim de “principal”, ficaria assim:

.principal .info-principal-produto

Um outro detalhe, você está usando o before(), ele vai inserir antes do bloco que você deseja, para alcançar o resultado esperado, sugiro você usar o append(), para inserir dentro ao final do elemento especificado. Ao invés de passar um objeto jQuery dentro dele, você pode usar o appendTo(), tem uma sintaxe mais simples:

$('#MR1209402018').appendTo('.info-principal-produto');
// ou
$('.info-principal-produto').append($('#MR1209402018'));

Se não deseja remover da descrição, pode cloná-lo antes:

$('#MR1209402018').clone().appendTo('.info-principal-produto');
// ou
$('.info-principal-produto').append($('#MR1209402018').prop('outerHTML'));

Até mais!!

2 curtidas

Muito Obrigado @math na vdd como sou leigo, estava usando uma funcao que ja havia aqui na comunidade, e tentando adaptar ao que precisava srsr, vlw pelas dicas tbm.


era isso mesmo que eu precisava, assim consigo por um resumo a baixo do nome do produto, e uma descrição completa mais a baixo.

@math partindo da mesma ideia só que na pagina inicial, saberia como movimento as categorias, queria mudar a posição, de algumas para dar mais destaque.


eu até consegui mover, mais vai apenas o titulo da categoria não vai os produtos a baixo dela, eu não uso o carrossel, e coloco para apresentar 20 produtos por categoria.

1 curtida

@ModificMoveis, dá para fazer de várias formas. Uma delas, como tanto o título, quanto os produtos, estão no mesmo nível, é selecionar os dois de uma vez usando o código da vitrine:

$('.vitrine-15818896, .vitrine-15818896 + ul').each(function() {
    $(this).insertBefore('.vitrine-destaque');
});

Espero ter ajudado, até mais.

1 curtida

ai no caso se eu quiser por ele dentro de outra div por exemplo uso o appendto

$('.vitrine-15818896, .vitrine-15818896 + ul').each(function() {
    $(this).insertappend('.vitrine-destaque');
ou 
    $(this).append('.vitrine-destaque');
})

;
@math
seria assim?

@ModificMoveis Você usaria o appendTo() caso queria que o elemento seja movido para o final dessa div, já o prependTo(), moveria para o começo dela. Somente o append() e prepend(), move também, mas você precisa usar um objeto jQuery como parâmetro, ao invés de só indicar o seletor desejado. Ex: $(…).append($(…)). Caso não queria mover o elemento, deseje apenas copiar, você pode seguir o passo descrito na minha primeira resposta, clonando o elemento ou copiando seu HTML.

*Esse insertappend() não existe, seria o appendTo(’.nome_da_classe’) ou append($(’.nome_da_classe’)).

1 curtida

Caso queria inserir antes/depois ao invés de dentro do elemento, respectivamente, existe o insertBefore() / before(), insertAfter() / after(), como foi o caso da Home.

1 curtida

@math deixa eu ver se entendi, srsr

tenho uma div exemplo


<div id-="divdestaque"></div>

e quero inserir a Vitrine-destaque dentro dela. então seria assim

$('.vitrine-destaque, .vitrine-destaque + ul').each(function() {
    $(this).appendTo('divdestaque');
 
})

Isso, só tem uns erros de escrita, não funcionaria assim, o correto seria:

HTML:

<div id="divdestaque"></div>

JS:

$('.vitrine-destaque, .vitrine-destaque + ul').each(function() {
    $(this).appendTo('#divdestaque');
});

Caso for classe, seria ‘.’ ao invés de ‘#’:

HTML:

<div class="divdestaque"></div>

JS:

$('.vitrine-destaque, .vitrine-destaque + ul').each(function() {
    $(this).appendTo('.divdestaque');
});

Espero ter ajudado, até mais.

1 curtida

Vamos a ideia, tenho abas, e quero movimentar as vitrines para dentro de cada aba, assim consigo organizar em abas minha HOME.

<ul class="abas" id="AbasHome">
    <li class="aba" id="aba-1">
     <a href="#aba-1">Destaques</a>
<section class="conteudo"id="AbaDestaque"> Conteúdo da Aba 1 </section></li>
    <li class="aba" id="aba-2">
     <a href="#aba-2">Lancametos</a> 
<section class="conteudo" id="AbaLancamentos"> Conteúdo da Aba 2 </section></li>
</ul>

Movimento a Lista AbasHome pra antes da vitrine-lancamento


$('#AbasHome').before($('.vitrine-lancamento'));

Agora quero movimentar a Vitrine-Destaque para dentro da sessao ID AbaDestaque

$('.vitrine-destaque, .vitrine-destaque + ul').each(function() {
    $(this).appendTo('#AbaDestaque');
});

e a Vitrine Lançamentos para dentro da sessao AbaLancamentos

$(’.vitrine-lancamento, .vitrine-lancamento + ul’).each(function() {
$(this).appendTo(’#AbaLancamentos’);
});

Seria assim??
Agora uma duvida, eu movimentei a lista para antes da Vitrine-Lançamento,e a baixo eu movimento a vitrine lançamento isso pode dar bugar e não movimentar nada?

Parece tudo correto, acredito que você já possa testar, se preferir, em um momento que a loja não tenha tanto acesso. Não creio que não vá funcionar, porque a execução é sequencial.

// Funciona
$('#AbasHome').before($('.vitrine-lancamento'));
// Shorthand
$('#AbasHome').insertBefore('.vitrine-lancamento');

Espero ter ajudado, até mais!!

1 curtida

Obrigado pelas explicações, estou tentando fazer essa alteração a mais de 10 dias sem sucesso. com seu help consegui vlw.

2 curtidas