<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>
E 'possibile modificare l'ordine di questo div con jQuery? Mi piacerebbe ricevere:cambia ordine div con jQuery
<div class="test two">bbb</div>
<div class="test three">ccc</div>
<div class="test one">aaa</div>
posso solo usare jQuery
LIVE: http://jsfiddle.net/cmVyM/
farò questo solo uno - se il documento è pronto.
Suoni come se si desidera spostare il primo div dopo l'ultimo.
$.fn.insertAfter inserisce gli elementi corrispondenti dopo il parametro:
$(".test.one").insertAfter(".test.three");
Edit: Se si desidera una soluzione più generale di aggiunta del primo all'ultimo, senza ricorrere alle classi espliciti:
var tests = $('.test');
tests.first().insertAfter(tests.last());
Questo non funziona quando c'è un gruppo di div con lo stesso nome di classe. Dì 3 div con 'test-one', 3 con' test-two' e un altro 3 con 'test-three'. Qualche suggerimento per un caso del genere? –
@VineetKaushik Cosa vuoi che succeda, perché tutti i 'test-one' vengano inseriti dopo' test-three', o uno specifico? Se il primo succede già, se quest'ultimo sceglie selettori più specifici. – Zirak
Basta fare $('.one').insertAfter('.three');
Basta usare InsertAfter come la risposta precedente detto
var eerste = $('.one');
var tweede = $('.two');
var derde = $('.three');
tweede.insertAfter(derde);
eerste.insertAfter(tweede);
$("#botao").click(function(){
$("#a3").insertBefore("#a1");
});
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div>
<a id="botao">altera</a>
</div>
Nel caso in cui questa risposta venga trovata in un secondo momento, è possibile aggiungere alcuni commenti di base su come funziona. Grazie. – Shawn
puoi farlo da questa
var obj = $('.test.two');
obj.after(obj.prev());
così, div uno e div due cambieranno la loro posizione.
Spero possa aiutarti.
Ecco un semplice esempio con i pulsanti di navigazione.
HTML
<ul>
<li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
<li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>
JavaScript con jQuery
$('.up').on('click', function(e) {
var wrapper = $(this).closest('li')
wrapper.insertBefore(wrapper.prev())
})
$('.down').on('click', function(e) {
var wrapper = $(this).closest('li')
wrapper.insertAfter(wrapper.next())
})
Provalo qui: https://jsfiddle.net/nguyenvuloc/vd105gst
il suo bell'esempio. ma cosa succede se voglio salvare l'ordine aggiornato? – TarangP
Se si desidera modificare l'ordine di un gruppo di div con lo stesso nome della classe (ad esempio indicato di seguito):
<div class="wrapper">
<span class="text">First Heading</span>
<span class="number">1</span>
</div>
<div class="wrapper">
<span class="text">Second Heading</span>
<span class="number">2</span>
</div>
<div class="wrapper">
<span class="text">Third Heading</span>
<span class="number">3</span>
</div>
È possibile riordinare facendo il seguente codice jQuery:
$('.wrapper .number').each(function() {
$(this).insertBefore($(this).prev('.text'));
});
Suona come un lavoro per jQuery UI ordinabile. –
Un paio di esempi di div di classificazione in questa mia prima risposta: http://stackoverflow.com/questions/7623819/looking-for-a-javascript-solution-to-reorder-divs/7623918#comment9258056_7623918. – jfriend00
Uguale a questa domanda: http://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom – dan360