使用 javascript 查找最接近的第一个 p 的文本值

Question

I have multiple columns like this

<div class="col-md-6 mt-3 mt-md-0">
        <div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
            <h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
            <div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
                <div class="flip-card h-100">
                    <div class="flip-card-inner h-100">
                        <div class="flip-card-front d-flex justify-content-center align-items-center">
                            <p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
                        </div>
                        <div class="flip-card-back d-flex justify-content-center align-items-center">
                            <p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
                <div class="left text-start">
                    <h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
                    <p class="mb-0"><small>1 day ago</small></p>
                </div>
                <div class="right">
                    <span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
                    <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24"></a>
                </div>
            </div>
        </div>
    </div>

What I am looking for is get value of nearest p text inside flip-card-front class when I click copy class image icon. I am new in javascript and does not getting idea how I can do it.

var copy = document.getElementsByClassName('copy');
            for (var i = 0; i < copy.length; i++) {
              copy[i].addEventListener('click', function() {
                //get text   નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!
        console.log("p tag value which is inside flip-card-front");
              });
            }

I am trying from last hour but have not found any working solution for achieve my goal. Let me know if someone here can help me for same. Thanks!

Answer 1

regarding your structure

you search closest blog_content, from there search flip-card-front p:

copy[i].addEventListener('click', evt => {
   const el = evt.target.closest('.blog_content');
   const mySearchedText = el.querySelector('.flip-card-front p).innerHTML;
});

not tested but should be ok

Answer 2

You you need to do:

• Navigate to the necessary node.
• For this, you will have to go to common parent in the DOM tree. You can use .closest to do that.
• Once you have parent, you can lookup any necessary element from it

 var copy = document.getElementsByClassName('copy'); for (var i = 0; i < copy.length; i++) { copy[i].addEventListener('click', function() { const content = this.closest('.blog_content') const cardFront = content.querySelector('.flip-card-front p') const text = cardFront.textContent; console.log(text) }); }

 <div class="col-md-6 mt-3 mt-md-0"> <div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3"> <h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5> <div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100"> <div class="flip-card h-100"> <div class="flip-card-inner h-100"> <div class="flip-card-front d-flex justify-content-center align-items-center"> <p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ,,</p> </div> <div class="flip-card-back d-flex justify-content-center align-items-center"> <p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay:<br> tamar jivanam khushio felay.<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao.:</p> </div> </div> </div> </div> <div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3"> <div class="left text-start"> <h6 class="mb-0"><a class="link-bold" href="https.//stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6> <p class="mb-0"><small>1 day ago</small></p> </div> <div class="right"> <span class="copy"><img src="https://stag.example.com/assets/images/copy:png" class="mx-1 social" alt="share quote" width="24" height="24"></span> <a href="https.//stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24"></a> </div> </div> </div> </div>