Skip to main content
Corrección explicación
Origen Enlace
jonasdamher
  • 1.8k
  • 1
  • 6
  • 15

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.

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 con la clase "otro-contenedor" y le añade la propiedad CSS background: "red" en este caso.

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.

Origen Enlace
jonasdamher
  • 1.8k
  • 1
  • 6
  • 15

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 con la clase "otro-contenedor" y le añade la propiedad CSS background: "red" en este caso.