Need to get text of parent's div when child's div is clicked

Question

Here when I am clicking on More Info. I want an alert showing the value present inside h3 tags. How can I do that ??

Here is the html i am working on

<div class="col-lg-4 col-xs-6"> 
  <div class="small-box bg-red">
    <div class="inner">
      <h3>Text 1</h3>
      <p>fhjh</p>
    </div>

  <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
  </div>
</div>

similer questions http://stackoverflow.com/questions/9053983/alert-id-of-current-element , http://stackoverflow.com/questions/3239598/how-can-i-get-the-id-of-an-element-using-jquery — Malik, Jun 08 '15 at 03:37

score 1 · Answer 1 · answered Jun 08 '15 at 03:38

1

so what you want is to click on the small-box-footer link and alert the 'Text 1'?

$(document).ready(function(){
    $('.small-box-footer').on('click', function(evt){
         //if you don't want the default event
         evt.preventDefault();
         //show the alert text
         alert($('.inner h3').text());
    })
})

answered Jun 08 '15 at 03:38

Surely

1,649
16
23

suppose i have a h3 tag with an id .. then how can i refer that – Prakhar Jun 08 '15 at 04:05
@Prakhar just replace the $('.inner h3') to $('#yourH3Id') – Surely Jun 08 '15 at 04:48

score 0 · Answer 2 · answered Jun 08 '15 at 03:38

0

you can try :

$('.small-box-footer').click(function(e){
    var text = $(this).prev().children().first().text();
    console.log(text);
});

answered Jun 08 '15 at 03:38

Yangguang

1,785
9
10

score 0 · Answer 3 · answered Jun 08 '15 at 03:39

you need to have an event listener for the onclick event when someone clicks on the "more info".

you'll then need to get the closest query the dom (you can traverse upwards or alternatively go from the DOM straight to a specific element... it's cheaper to go up).

example...

Using Jquery

$('.small-box-footer').click(function(ev) {
  ev.preventDefault();
  // find the h3
  var text = $('.inner h3').text();
  alert(text);
});

score 0 · Answer 4 · answered Jun 08 '15 at 03:48

Simple as just grabbing the h3 directly, skip traversing:

window.showTitle = function() {
  alert($('h3').text())
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 col-xs-6">
  <div class="small-box bg-red">
    <div class="inner">
      <h3>Text 1</h3 
<p>fhjh</p>
</div>
<a href="#" class="small-box-footer" onclick="showTitle()">More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>

score 0 · Accepted Answer · answered Jun 08 '15 at 03:49

0

you can try code below

$(document).ready(function(){
    $('.small-box-footer').on('click', function(e){
         e.preventDefault();        
         alert($(this).parents('.small-box').find('h3').text());
    })
})

Working Demo

answered Jun 08 '15 at 03:49

Vuthy Sok

720
3
10
22

Need to get text of parent's div when child's div is clicked

5 Answers5