CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Prakhar
Prakhar

Reputation: 536

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

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>

Upvotes: 0

Views: 448

Answers (5)

Vuthy Sok
Vuthy Sok

Reputation: 720

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

Upvotes: 0

omikes
omikes

Reputation: 8513

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>

Upvotes: 0

Denis Tsoi
Denis Tsoi

Reputation: 10414

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);
});

Upvotes: 0

Yangguang
Yangguang

Reputation: 1785

you can try :

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

Upvotes: 0

Surely
Surely

Reputation: 1709

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());
    })
})

Upvotes: 1

Related Questions