javascript - queryselector - Cualquier forma de mezclar contenido en múltiples elementos div
queryselector javascript (7)
¿Estás de acuerdo con usar una biblioteca de JavaScript como jQuery ? Aquí hay un rápido ejemplo de jQuery para lograr lo que busca. la única modificación de su HTML es la adición de un elemento contenedor como se sugiere:
<div id="shuffle">
<div id=''d1''>...</div>
<div id=''d2''>...</div>
<div id=''d3''>...</div>
</div>
y javascript:
function shuffle(e) { // pass the divs to the function
var replace = $(''<div>'');
var size = e.size();
while (size >= 1) {
var rand = Math.floor(Math.random() * size);
var temp = e.get(rand); // grab a random div from our set
replace.append(temp); // add the selected div to our new set
e = e.not(temp); // remove our selected div from the main set
size--;
}
$(''#shuffle'').html(replace.html() ); // update our container div with the
// new, randomized divs
}
shuffle( $(''#shuffle div'') );
Soy relativamente nuevo en Javascript y me preguntaba si hay una forma rápida de mezclar contenido que está contenido en varias etiquetas <div> . Por ejemplo
<div id=''d1''>
<span>alpha</span>
<img src=''alpha.jpg''>
</div>
<div id=''d2''>
<span>beta</span>
<img src=''beta.jpg''>
</div>
<div id=''d3''>
<span>gamma</span>
<img src=''gamma.jpg''>
</div>
<button onclick=''shuffle_content();''>Shuffle</button>
Después de hacer clic en el botón, me gustaría que el contenido en d1, d2, d3 cambie de lugar (por ejemplo, quizás d3 sería primero, luego d1, luego d2).
Una forma rápida de mover las cosas es copiar el primer elemento div (d1), ponerlo al final (después de d3) y luego eliminar el d1 original. Pero eso realmente no aleatoriza las cosas. Simplemente hace que las cosas entren en el ciclo (lo que podría estar bien).
Cualquier sugerencia sera apreciada. Gracias.
Puedes agarrar el contenido de cada div
c1 = document.getElementById(''div1'').innerHTML
c2 = document.getElementById(''div2'').innerHTML
c3 = document.getElementById(''div3'').innerHTML
Luego, determine un nuevo orden para ellos al azar ... y luego coloque cada contenido en el nuevo destino
decir, por ejemplo, la aleatoriedad dio:
c1_div = ''div2''
c2_div = ''div1''
c3_div = ''div3''
entonces tu solo:
document.getElementById(c1_div).innerHTML = c1
document.getElementById(c2_div).innerHTML = c2
document.getElementById(c3_div).innerHTML = c3
Sugeriría aleatorizar el contenido, no las Divs mismas. Puede lograr esto colocando el contenido en páginas html separadas, sin información ni cuerpo del encabezado, solo el contenido.
Luego, use una función en la carga de página para asignar aleatoriamente qué div obtiene qué contenido y usarlo para cambiar el contenido del DIV:
<script type="text/javascript">
function ajaxManager(){
var args = ajaxManager.arguments;
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
}
if (x){
switch (args[0]){
case "load_page":
if (x)
{
x.onreadystatechange = function()
{
if (x.readyState == 4 && x.status == 200){
el = document.getElementById(args[2]);
el.innerHTML = x.responseText;
}
}
x.open("GET", args[1], true);
x.send(null);
}
break;
case "random_content":
ajaxManager(''load_page'', args[1], args[2]); /* args[1] is the content page, args[2] is the id of the div you want to populate with it. */
break;
} //END SWITCH
} //END if(x)
} //END AjaxManager
</script>
Usaría el código del lado del servidor para lograr esto. Sé que esto no es realmente una respuesta a su pregunta, pero es una implementación alternativa.
Atentamente,
Franco
Para su HTML, la respuesta corta a su pregunta es:
function shuffle_content() {
var divA = new Array(3);
for(var i=0; i < 3; i++) {
divA[i] = document.getElementById(''d''+(i+1));
document.body.removeChild(divA[i]);
}
while (divA.length > 0)
document.body.appendChild(divA.splice(Math.floor(Math.random() * divA.length),1)[0]);
}
Para llegar allí, escribí lo siguiente, que creo que funciona mejor:
<html>
<div id="cards">
<div id="card0">Card0</div><div id="card1">Card1</div>
<div id="card2">Card2</div><div id="card3">Card3</div>
<div id="card4">Card4</div><div id="card5">Card5</div>
<div id="card6">Card6</div><div id="card7">Card7</div>
<div id="card8">Card8</div><div id="card9">Card9</div>
</div>
<button id="shuffle">Shuffle</button>
<script language="javascript">
<!--
document.getElementById(''shuffle'').onclick = function () {
var divCards = document.getElementById(''cards'');
var divCardsArray = new Array(
document.getElementById(''card0''),
document.getElementById(''card1''),
document.getElementById(''card2''),
document.getElementById(''card3''),
document.getElementById(''card4''),
document.getElementById(''card5''),
document.getElementById(''card6''),
document.getElementById(''card7''),
document.getElementById(''card8''),
document.getElementById(''card9'')
);
return function() {
var mDivCardsArray=divCardsArray.slice();
while (divCards.childNodes.length > 0) {
divCards.removeChild(divCards.firstChild);
}
while (mDivCardsArray.length > 0) {
var i = Math.floor(Math.random() * mDivCardsArray.length);
divCards.appendChild(mDivCardsArray[i]);
mDivCardsArray.splice(i,1);
}
return false;
}
}()
//-->
</script>
</html>
Estaba tratando de empacar esa última declaración de tiempo para:
while (mDivCardsArray.length > 0) {
divCards.appendChild(
mDivCardsArray.splice(
Math.floor(Math.random() * mDivCardsArray.length)
,1)[0]
);
}
pero esto es bastante difícil de leer y propenso a error.
Yendo con jQuery o Prototype puede seguir la misma estructura básica y obtener el resultado que está buscando.
Personalmente, creo que se ve mejor si agrega 2 divs más a la pila de cards , expande divCardsArray , inserta el siguiente bloque de estilo y agrega este código justo después de la definición de divCardsArray .
<html>
...
<style>
html,body{height:100%;width:100%;text-align:center;font-family:sans-serif;}
#cards,#cards div{padding:5px;margin:5px auto 5px auto;width:100px;}
</style>
...
<div id="cardA">CardA</div><div id="cardB">CardB</div>
...
var colorCardsArray = new Array(
''#f00'', ''#f80'', ''#ff0'', ''#8f0'', ''#0f0'', ''#0f8'',
''#0ff'', ''#08f'', ''#00f'', ''#80f'', ''#f0f'', ''#f08'' );
for(var i=0;i<divCardsArray.length;i++)
divCardsArray[i].style.backgroundColor=colorCardsArray[i];
...
</html>
Una pregunta reciente fue cerrada como duplicado de esto, pero siento que tengo una mejor respuesta que ninguna aquí. Este método es muy directo. No se produce un error al copiar HTML, por lo que se conservan los cambios en el DOM, los estilos, los controladores de eventos, etc.
Para barajar todos los elementos secundarios de algún elemento principal, seleccione un elemento secundario y añádalo de nuevo al elemento primario cada vez hasta que todos los elementos secundarios se vuelvan a adjuntar.
Usando jQuery:
var parent = $("#shuffle");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
Demostración: http://jsfiddle.net/C6LPY/2
Sin jQuery es similar e igual de simple:
var parent = document.getElementById("shuffle");
var divs = parent.children;
var frag = document.createDocumentFragment();
while (divs.length) {
frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
}
parent.appendChild(frag);
Demostración: http://jsfiddle.net/C6LPY/5/
Editar: Aquí hay un desglose del código:
// Create a document fragment to hold the shuffled elements
var frag = document.createDocumentFragment();
// Loop until every element is moved out of the parent and into the document fragment
while (divs.length) {
// select one random child element and move it into the document fragment
frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
}
// appending the document fragment appends all the elements, in the shuffled order
parent.appendChild(frag);