如何使用jquery获取下一个div的内部元素的文本？

Question

I have two divs... Then when I clicked the 1st div, i want to get the text inside of h3 of the 2nd div Here is my codes... But none of the jquery code is working.. any help to fix my code, please... thanks

HTML

<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
    qqqq
    <div class="timeline-heading">
        wwww
        <h3 class="timeline-title">Hello</h3>
        <span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
    </div>
    <div class="timeline-body">
        <p>III</p>
    </div>
</div>

JQUERY / JAVASCRIPT

$('.timeline-badge').on('click', function() {
    alert($(this).closest(".timeline-panel + div + h3").text());
    alert($( '.timeline-badge > div:eq(0) + h3:eq(0)' ).children().text());
    alert($(this).nextAll( '.timeline-heading').eq(0).innerhtml);
});

http://jsfiddle.net/rK4qc/119/

Answer 1

The .timeline-panel is next sibling of .timeline-badge . So you should use .next() to selecting it. Then use .find() to finding .timeline-title in it.

$('.timeline-badge').on('click', function() {
  var text = $(this).next().find(".timeline-title").text();
  console.log(text);
});

 $('.timeline-badge').on('click', function() { var text = $(this).next().find(".timeline-title").text(); console.log(text); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div> <div class="timeline-panel"> qqqq <div class="timeline-heading"> wwww <h3 class="timeline-title">Hello</h3> <span class="date"><i class="icon-calendar"></i>February 00, 2017</span> </div> <div class="timeline-body"> <p>III</p> </div> </div>

Answer 2

Use Jquery's siblings selectors https://api.jquery.com/siblings/

$('.timeline-badge').on('click', function() {
    console.log($(this).siblings());
});

Answer 3

Go get it by the class name of h3

$('.timeline-badge').on('click', function() {
    alert($(this).next().find('h3.timeline-title').text());
});

Answer 4

您可以通过以下方式获取 h3 标签的值：

$('div.timeline-panel div.timeline-heading h3.timeline-title').val();

Answer 5

use this code.

$(document).on("click",".timeline-badge",function() {
   alert("H3 IS " + $('h3.timeline-title').text());
});

and check this fiddle for the code. http://jsfiddle.net/rK4qc/121/

For the second div just add div for it and get the text user the .text() function.

Answer 6

this will work for you:-

$('.timeline-badge').on('click', function() {

alert($(this).next().find('h3.timeline-title').text());
});