4.0 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
bad87fee1348bd9aed308826	Apunta al padre de un elemento usando jQuery	6	18321	target-the-parent-of-an-element-using-jquery

--description--

Cada elemento HTML tiene un elemento parent (padre) del cual inherits (hereda) propiedades.

Por ejemplo, tu elemento jQuery Playground h3 tiene el elemento padre de <div class="container-fluid">, que en sí mismo tiene el padre body.

jQuery tiene una función llamada parent() que te permite acceder al padre del elemento que hayas seleccionado.

Aquí hay un ejemplo de cómo usarías la función parent() si quieres dar al elemento padre del elemento left-well un color de fondo azul:

$("#left-well").parent().css("background-color", "blue")

Dale al padre del elemento #target1 un color de fondo rojo.

--hints--

Tu elemento left-well debe tener un fondo rojo.

assert(
  $('#left-well').css('background-color') === 'red' ||
    $('#left-well').css('background-color') === 'rgb(255, 0, 0)' ||
    $('#left-well').css('background-color').toLowerCase() === '#ff0000' ||
    $('#left-well').css('background-color').toLowerCase() === '#f00'
);

Debes usar la función .parent() para modificar este elemento.

assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));

El método .parent() debe ser llamado en el elemento #target1.

assert(
  code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")\s*?\)\s*?\.parent/gi)
);

Solo debes usar jQuery para añadir estas clases al elemento.

assert(code.match(/<div class="well" id="left-well">/g));

--seed--

--seed-contents--

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");

  });
</script>

<!-- Only change code above this line -->

<body>
  <div class="container-fluid">
    <h3 class="text-primary text-center">jQuery Playground</h3>
    <div class="row">
      <div class="col-xs-6">
        <h4>#left-well</h4>
        <div class="well" id="left-well">
          <button class="btn btn-default target" id="target1">#target1</button>
          <button class="btn btn-default target" id="target2">#target2</button>
          <button class="btn btn-default target" id="target3">#target3</button>
        </div>
      </div>
      <div class="col-xs-6">
        <h4>#right-well</h4>
        <div class="well" id="right-well">
          <button class="btn btn-default target" id="target4">#target4</button>
          <button class="btn btn-default target" id="target5">#target5</button>
          <button class="btn btn-default target" id="target6">#target6</button>
        </div>
      </div>
    </div>
  </div>
</body>

--solutions--

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
  });
</script>

<!-- Only change code above this line -->

<body>
  <div class="container-fluid">
    <h3 class="text-primary text-center">jQuery Playground</h3>
    <div class="row">
      <div class="col-xs-6">
        <h4>#left-well</h4>
        <div class="well" id="left-well">
          <button class="btn btn-default target" id="target1">#target1</button>
          <button class="btn btn-default target" id="target2">#target2</button>
          <button class="btn btn-default target" id="target3">#target3</button>
        </div>
      </div>
      <div class="col-xs-6">
        <h4>#right-well</h4>
        <div class="well" id="right-well">
          <button class="btn btn-default target" id="target4">#target4</button>
          <button class="btn btn-default target" id="target5">#target5</button>
          <button class="btn btn-default target" id="target6">#target6</button>
        </div>
      </div>
    </div>
  </div>
</body>

4.0 KiB Raw Blame History