3.6 KiB
3.6 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1348bd9aed308826 | Target the Parent of an Element Using jQuery | 6 | Apunta al padre de un elemento usando jQuery |
Description
parent
del cual inherits
propiedades. Por ejemplo, su elemento jQuery Playground
h3
tiene el elemento principal de <div class="container-fluid">
, que a su vez tiene el body
principal. jQuery tiene una función llamada parent()
que le permite acceder al padre de cualquier elemento que haya seleccionado. Este es un ejemplo de cómo usaría la función parent()
si quisiera darle al elemento padre del elemento del left-well
un color de fondo azul: $("#left-well").parent().css("background-color", "blue")
#target1
al padre del elemento #target1
un color de fondo rojo. Instructions
Tests
tests:
- text: Su elemento de <code>left-well</code> debe tener un fondo rojo.
testString: '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", "Your <code>left-well</code> element should have a red background.");'
- text: Debe usar la función <code>.parent()</code> para modificar este elemento.
testString: 'assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g), "You should use the <code>.parent()</code> function to modify this element.");'
- text: 'El método <code>.parent()</code> debe llamarse en el elemento <code>#target1</code> .'
testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?#target1\s*?(?:"|")\s*?\)\s*?\.parent/gi), "The <code>.parent()</code> method should be called on the <code>#target1</code> element.");'
- text: Solo use jQuery para agregar estas clases al elemento.
testString: 'assert(code.match(/<div class="well" id="left-well">/g), "Only use jQuery to add these classes to the element.");'
Challenge Seed
<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>
Solution
// solution required