0

1 つの大きな問題があります。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」をクリックして「子」テキストを取得したいのです。たとえば、3 番目の「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属性の一部を削除し、そのうちの1 つがクリックされる項目が表示されないようにしました):

<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 に答える