En algunos artículos los párrafos están entre div > p
dado a que según los estilos que se den al texto o el tipo de formato, desde el WYSIWYG HTML
Editor puede generarlo de tal manera:
<div id="destination">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<div>Lorem ipsum dolor</div>
<p>Lorem ipsum dolor</p>
<div>Lorem ipsum dolor</div>
<div>Lorem ipsum dolor</div>
</diV>
Entonces es imposible que vaya el texto en un solo orden dado al WYSIWYG HTML
Editor.
Entonces cuando yo desee mover una información solo va ha funcionar en ciertos contendidos donde se hayan generado todo en una etiqueta o contenedor principal, por ejemplo probé con div
aplicando la regla $('#destination>div')
pero esta generado todo el HTML
en p
por lo tanto no funcionara:
$(function(){
$('#source').insertAfter($('#destination>div').eq(3));
});
#source {
color: white;
background: green;
padding: 4px 8px;
}
#destination {
color: white;
background: red;
padding: 4px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="source">
<p>Source</p>
</div>
<div id="destination">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<pLorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
</div>
A diferencia si esta en la condición correcta $('#destination>p')
ahí si funciona:
$(function(){
$('#source').insertAfter($('#destination>p').eq(3));
});
#source {
color: white;
background: green;
padding: 4px 8px;
}
#destination {
color: white;
background: red;
padding: 4px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="source">
<p>Source</p>
</div>
<div id="destination">
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
<p>Destination</p>
</div>
Entonces como puedo hacer para que sin importar que etiquetas existan o no dentro del contenedor global <div id="destination"></div>
dicho contenido se agregue al después de tres etiquetas .eq(3)
sin importar que sean o no las mimas.