0

Con load() me estoy trayendo datos de otros sitio

<div class="contenedor">red</div>

Y en la actual hoja, tengo:

<div class="otro-contenedor"></div>

Estoy tratando de asignar el contenido de contenedor, en este caso "red", como propiedad css al otro contenedor:

var propiedad = $(".contenedor").text();
$(this).find('.otro-contenedor').css('background', propiedad)

Pero cuando me lo devuelve, lo hace como indefinido o null.

¿Alguna ayuda? Gracias.

3 respuestas 3

1

Puedes localizar el segundo contenedor por el nombre de la clase, no es necesario el find.

var propiedad = $(".contenedor").text();
console.log(propiedad);
$('.otro-contenedor').css('background', propiedad)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contenedor">red</div>

<div class="otro-contenedor">Este es el contenido de otro-contenedor</div>

1

El this en el contexto global hace referencia al objeto global window es lo que ocurre en tu caso. Por eso el find te devuelve undefined.

Deberías buscar en body.

var propiedad = $(".contenedor").text();
$('body').find('.otro-contenedor').css('background', propiedad)
.otro-contenedor {
  width: 100px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contenedor">red</div>
<div class="otro-contenedor"></div>

He añadido css para que pudieras ver que se aplican los estilos.

0

Explicación mas abajo. He visto que tienes un error en:

$(this).find('.otro-contenedor').css('background', propiedad)

Lo cambié por:

$('.otro-contenedor').css("background",propiedad)

De esta manera haces referencia directamente al div en cuestión.

El atributo this hace referencia al elemento referenciado en una función. Como en este caso de ejemplo con la clase "padre-contenedor", como puede ser:

<div class="contenedor">red</div>
<div class="padre-contenedor" style="padding:20px;">
    <div class="otro-contenedor" style="padding:20px;"></div>
</div>
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {

    $('.padre-contenedor').on('click', function() {

        let propiedad = $(".contenedor").text()

        $(this).find('.otro-contenedor').css("background",propiedad)
    })

});
</script>

Al hacer click en el elemento div "padre-contenedor" coge el texto del elemento div "contenedor" y en el div con la clase "padre-contenedor" busca un elemento hijo con la clase "otro-contenedor" y le añade la propiedad CSS background: "red" en este caso.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.