Come posso impostare il testo di un DIV figlio all'interno di un ripetitore?

Question

Ho un ripetitore contenente il seguente frammento HTML:

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

Vorrei selezionare il div taggato " parent " usando una funzione all'interno di script.js e imposta l'HTML interno del div con id " child1 " ;.

Il mio html finale dovrebbe apparire così:

<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>

Come posso farlo usando jQuery?

Answer 1

Innanzitutto, non puoi codificare il tuo HTML in questo modo in un ripetitore. Non è possibile assegnare gli stessi ID a più elementi nella pagina. Il tuo HTML dovrà utilizzare le classi per l'identificazione, se le identifichi affatto.

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

Le funzioni nel tag script non hanno modo di sapere dove si trovano nel DOM rispetto a tutto il resto. Dovrai associare l'invocazione della funzione a qualche elemento per poter derivare le relative relazioni DOM. Il modo più semplice è usare jQuery (o altro framework) per aggiungere un gestore agli elementi.

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

Quanto sopra aggiungerà un gestore di clic a ciascun DIV con classe child2 e quando verrà cliccato, troverà il suo DIV padre (nota che la classe non è necessaria sul genitore) e quindi il figlio corretto il cui HTML da aggiornare in base alla sua classe. Inoltre, tieni presente che lo script sopra deve essere aggiunto alla pagina solo una volta, non una volta per elemento ripetitore.

Answer 2

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

Answer 3

La tua domanda non ha molto senso. Puoi farlo:

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

Non è necessario un riferimento a #parent o this .

Ma supponendo che non fosse così, ci sono diversi modi in cui puoi trovare un elemento relativo a this :

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

o

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

o

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