获取动态创建的 Div 子文本


Get dynamically created Div child text

我有一个大问题。我有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"时,我想得到(例如在"警报"中)"示例文本3"。我试过:$('body').on('click', '.get_child_text', function() {(...)})但它什么也没返回。请帮忙!

更新好的,谢谢,但是如果我遇到这种情况(很少有相同的"项目"div,但有其他文本内容:

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

我想通过单击".kup"标签来获取".cena"跨度文本?

我建议,最简单的:

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

JS小提琴演示(改编自评论中提供的演示,纯粹是因为我喜欢console.log()而不是alert())。

但请注意,您有多个元素共享同一个id,这是无效的 HTML。请改用类。

如果您希望改用on()方法,那么我建议您:

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

JS小提琴演示。

但是,理想情况下,使用文档就绪页面上存在的父元素,以防止事件必须一直冒泡到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>

我建议使用:

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

JS小提琴演示。

引用:

  • click() .
  • closest() .
  • find() .
  • prev() .
  • text() .
  • HTML 文档的全局结构:元素标识符:idclass属性。