Comment définir le texte d'un enfant DIV dans un répéteur?

Question

J'ai un répéteur contenant l'extrait HTML suivant:

<div id='parent'>
    <div id='child1'/>
    <div id='child2'>
         <script type="text/javascript" src="script.js"></script>
    </div>
</div>

Je voudrais sélectionner la div étiquetée "parent" en utilisant une fonction dans script.js et définissez le code HTML interne de la div avec l'id "enfant1".

Mon code HTML final devrait ressembler à ceci:

<div id='parent'>
    <div id='child1'>This inner text was set by jQuery</div>
    <div id='child2'>
        <script type="text/javascript" src="script.js"></script>
    </div>
</div>

Comment faire avec jQuery?

Answer 1

Tout d'abord, vous ne pouvez pas coder votre code HTML de cette manière dans un répéteur. Vous ne pouvez pas attribuer les mêmes identifiants à plusieurs éléments de la page. Votre code HTML devra utiliser des classes pour l'identification, si vous les identifiez du tout.

<div class="parent">
  <div class="child1"><div>
  <div class="child2">Click Me<div>
</div>

Les fonctions de la balise script n'ont aucun moyen de savoir où elles se trouvent dans le DOM par rapport à tout le reste. Vous aurez besoin de lier l’invocation de fonction à un élément pour pouvoir en déduire les relations relatives du DOM. Le moyen le plus simple consiste à utiliser jQuery (ou un autre framework) pour ajouter un gestionnaire aux éléments.

$(function() {
    $('.child2').click( function() {
        $(this).parent().find('.child1').html( 'some html' );
    });
});

Ce qui précède ajoutera un gestionnaire de clics à chaque DIV de classe enfant2 et, lorsqu'il cliquera dessus, trouvera sa DIV mère (notez que la classe n'est pas nécessaire pour le parent), puis le bon enfant. dont le code HTML à mettre à jour en fonction de sa classe. Notez également que le script ci-dessus n'a besoin d'être ajouté à la page qu'une seule fois, et non par élément de répéteur.

Answer 2

$('#parent').children('#child1').html('html goes here');

Answer 3

Votre question n’a pas beaucoup de sens. Vous pouvez simplement faire ceci:

$("#child1").html("blah");

Vous n'avez pas besoin d'une référence à #parent ou this .

Mais en supposant que ce ne soit pas le cas, vous pouvez trouver un élément par rapport à this :

$(this).children("#child1")

ou

$(this).find("#child1") // descendant, not just child

ou

$("#child1", this) // descendant, not just child