How to get the Dynamic values of the Title

Question

I have a code where the button and title are in same div container like this:

<div class="cmpl-teaserd__content">
        <div class="cmpl-teaserd__pretitle">Featured Sample Title</div>        
    <div class="cmpl-teaserd__title wow animated" style="visibility: visible;">
        <h2><b>Borcher</b> <span style="font-weight: normal;">Collection</span></h2>
    </div>      
    <div class="cmpl-teaserd__description">
        <p>Sample text Sample text Sample text Sample text</p>
    </div>        
    <div class="cmpl-teaserd__action-container">        
    <a class="cmpl-teaserd__action-link" href="#.html" target="_self" title="">View Collection</a>
 </div>

Am using the Code like this:

$(document).on("click","a.cmpl-teaserd__action-link",function(){
    console.log("Title:" + $(this).text() + " Link Clicked");
  
});

Requirement: I want to get the Title1 (div.cmpl-teaserd__pretitle) & Title2 (div.cmpl-teaserd__title wow animated) of the container once the link (a.cmpl-teaserd__action-link) got clicked.

Kindly provide your feedback to get the value

Answer 1

You can loop through all the divs inside the selected div and then maintain a counter to print just the div you want to print. It can be better implemented. this might help.

    $(document).on("click","a.cmpl-teaserd__action-link",function(){
        var count = 1;
        $('div.cmpl-teaserd__content div').each (function (count) {
            count++;
            if(count<3){
                console.log("Title"+count +" "+  $(this).attr('class'));
            }
        });
  
   });