Получить динамически созданный текст дочернего ребенка

Question

У меня есть одна большая проблема. У меня есть этот код, сгенерированный PHP:

<div id="parent"> 
<div id="child">Example text1</div> 
<a class="get_child_text">Get text</a> 
</div>  

<div id="parent"> 
<div id="child">Example text2</div> 
<a class="get_child_text">Get text</a> 
</div> 

<div id="parent"> 
<div id="child">Example text3</div> 
<a class="get_child_text">Get text</a> 
</div> 

И я хочу, чтобы динамически получить текст DIV «ребенок», который находится в «родительской» DIV, где я щелкнул тег. Просто, я хочу получить «детский» текст, нажав «get_child_text». Например, когда я нажал третий «get_child_text», я хочу получить (например, в «alert») «Example text3». Я пробовал с: $('body').on('click', '.get_child_text', function() {(...)}), но он ничего не возвращает. Помоги пожалуйста!

ОБНОВЛЕНО Ок, спасибо, но если у меня есть эта ситуация (с некоторыми же «пункт» дивы, но с другим содержанием текста:

<div class="item"> 
    <div class="foto"><a rel="example_group" href="upload/foto04.jpg"><img id="miniatura" style="border:2px solid #fff;" src="upload/foto04.jpg"/></a><br><div id="details1" style="display:none;"><br><a style="margin-top:4px;" rel="example_group" href="upload/foto04.jpg">Powiększ zdjęcie</a><br><a href="#" class="kup" style="font-weight:bold; font-size:12px;">Dodaj do koszyka</a></div></div> 
    <div class="prawa_strona"> 
    <span id="id" style="display:none;">4</span> 
    <div class="tytul" id="tytul">Przyk</div> 
    <div id="opis1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet interdum ligula, eu rutrum purus. Nulla commodo justo et auctor sollicitudin. Nulla nibh lorem, mollis sit amet nisl sed, gravida fermentum mauris. Nullam dictum blandit interdum. Etiam pellentesque luctus elit, a semper nibh.</div> 
    <div style="display:none;" id="opis_dlugi1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet interdum ligula, eu rutrum purus. Nulla commodo justo et auctor sollicitudin. Nulla nibh lorem, mollis sit amet nisl sed, gravida fermentum mauris. Nullam dictum blandit interdum. Etiam pellentesque luctus elit, a semper nibh. Aliquam vel purus tempus, porta magna ac, luctus erat. Integer ut dui metus. Aliquam blandit magna ac felis scelerisque fringilla quis nec eros. Fusce sit amet purus felis. Nunc posuere nisi eu mattis ullamcorper. </div> 
    <div class="cena"><small>Cena: </small><b><span class="cena">2500</span> zł</b></div> 
    <div class="more"><a href="#" class="wiecej_a1">Pokaż więcej...</a></div> 
    </div> 
    </div> 

И я хочу, чтобы получить «.cena» диапазон текста с помощью щелчок ".kup" тег

Answer 1

Я хотел бы предложить, в самом простом варианте:

$('a.get_child_text').click(function(e){ 
    e.preventDefault(); 
    var divText = $(this).prev('div').text(); 
}); 

JS Fiddle demo (адаптировано сюда м, который предоставил in the comments, только потому, что я предпочитаю console.log() - alert()).

Но обратите внимание, что у вас есть несколько элементов, совместно использующих одинаковые id, это недействительный HTML. Вместо этого используйте класс.

Если вы хотите использовать метод on() вместо этого, то я бы рекомендовал:

$(document).on('click', 'a.get_child_text', function(e){ 
    var divText = $(this).prev('div').text(); 
}); 

JS Fiddle demo.

Но, в идеале, используйте родительский элемент, который присутствует на странице в готовом документе, чтобы предотвратить события, которые должны пузыриться до document.

Учитывая обновленный вопрос, следующий HTML (убрав некоторые из рядных style атрибутов, один из которых предотвращено элемент, который будет нажата от посторонних глаз)):

<div class="item"> 
    <div class="foto"><a rel="example_group" href="upload/foto04.jpg"><img id="miniatura" style="border:2px solid #fff;" src="upload/foto04.jpg"/></a> 

     <br /> 
     <div id="details1"> 
      <br /> <a style="margin-top:4px;" rel="example_group" href="upload/foto04.jpg">Powiększ zdjęcie</a> 

      <br /> 
      <a href="#" class="kup">Dodaj do koszyka</a> 

     </div> 
    </div> 
    <div class="prawa_strona"> <span id="id" style="display:none;">4</span> 

    <!-- stuff that doesn't matter, excised for brevity --> 
     <div class="cena"><small>Cena: </small><b><span class="cena">2500</span> zł</b> 

     </div> 
     <div class="more"><a href="#" class="wiecej_a1">Pokaż więcej...</a> 

     </div> 
    </div> 
</div> 

Я d предлагается использовать:

$('.kup').click(function(e){ 
    e.preventDefault(); 
    var cenaText = $(this).closest('.item').find('.cena').text(); 
    console.log(cenaText); 
}); 

JS Fiddle demo.

Ссылки:

• click().
• closest().
• find().
• prev().
• text().
• The global Structure of an HTML document: Element identifiers: the id and class attributes.