Como faço para definir o texto de uma DIV criança dentro de um repetidor?

Question

Eu tenho um repetidor que contém o seguinte trecho de HTML:

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

Gostaria de selecionar o div com a tag "pai", usando uma função dentro script.js e defina o HTML interno do div com id "child1". ??

Meu html final deve ficar assim:

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

Como posso fazê-lo usando jQuery?

Answer 1

Em primeiro lugar, você não pode codificar seu HTML desta forma, em um repetidor. Você não pode atribuir o mesmo ids para vários elementos da página. Seu HTML precisará usar classes para identificação, se você identificá-los em tudo.

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

Funções na tag script não têm nenhuma maneira de saber onde eles estão no DOM em relação a tudo o resto. Você vai precisar para amarrar a função de invocação a algum elemento, a fim de ser capaz de deduzir as relações DOM em relação a ele. A maneira mais fácil é usar jQuery (ou outra estrutura) para adicionar algum manipulador aos elementos.

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

O código acima irá adicionar um manipulador de clique para cada DIV com child2 classe e quando é clicado, vai encontrá-lo de pai DIV (note que a classe é desnecessária sobre o pai) e, em seguida, a criança correta cuja HTML para atualizar com base na sua classe. Além disso, nota que o script acima só precisa ser adicionado à página uma vez, não uma vez por item repetidor.

Answer 2

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

Answer 3

A sua questão não faz muito sentido. Você pode simplesmente fazer isso:

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

Você não precisa de uma referência para #parent ou this.

Mas assumindo que não era o caso, existem várias maneiras que você pode encontrar um elemento em relação ao this:

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

ou

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

ou

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