Con jQuery, puede cargar no solo el contenido de una URL, sino un selector de CSS específico desde dentro de esa URL. Es como esto.
$("#area").load("something.html #content");
Que encuentra el contenido en el archivo something.html
dentro del elemento con un ID de content
y lo coloca en la página actual, dentro del elemento con un ID de area
.
Pero digamos que something.html
en realidad es extremadamente similar a la página actual. En realidad, su objetivo es reemplazar #area con #area de something.html
. Entonces haces esto:
$("#area").load("something.html #area");
Pero eso es problemático, porque ahora terminarás con:
<div id="area">
<div id="area">
<!-- stuff -->
</div>
</div>
Y lo que sea que desencadenó esa acción, si lo volviera a hacer, conduciría a más anidamientos (malo).
La solución simple es simplemente tomar todo el contenido de #area, en lugar de #area en sí.
$("#area").load("something.html #area > *");
Y la demostración más simple (no completa) del mundo:
Ver demostración
Esto es particularmente útil cuando:
- Está Ajaxing un sitio como una mejora progresiva, por lo que cada URL no es solo un fragmento de datos, sino una página completa que, de lo contrario, se mantiene por sí sola (y las páginas tienen una estructura similar entre sí).
- No desea agregar marcas a la página como
<div id="inside"></div>
solo para solucionar este problema.
Gracias a Anthony Harris.