0

我有一个大问题。我有这个由 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，但有其他文本内容：

<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”跨度文本？

4

1 回答 1

3

我建议，最简单的：

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

JS Fiddle 演示（改编自评论中提供的演示，纯粹是因为我更喜欢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 小提琴演示。

参考：

于 2013-09-09T21:22:22.947 回答