Verfahre auf bestimmte Kinder - jQuery/Javascript

Question

Ich habe die folgenden DOM-Strukturen unten angegeben und ich möchte in beiden Szenarien zu den Hyperlink-Schaltflächen (a) gelangen. Ich habe sowohl die Headers (header1 und recordHeader1) anklickbar gemacht (Cursor: Zeiger). Also, wenn ich auf irgendwo sage sagen (sagen wir, wenn ich auf den titleTitle klicke) in header1 oder (name, job_title) in recordHeader1, würde ich gerne die Hyperlink-Schaltfläche finden und bestimmte Klick-Funktionalität ausführen. Es könnte mehr von diesem Szenario geben, aber in allen Szenarios gibt es einen übergeordneten Header wie den unten angegebenen, und der übergeordnete Header hat immer das Hyperlink-Element irgendwo im DOM. Bitte lassen Sie mich wissen, was ich hier falsch mache.

Szenario 1:

<div class="header1"> 
    <a href="#" class="downArrow k-icon k-minus"></a> <!-- This element --> 
    <img class="foundIcon" src="https://google.com"> 
    <div class="headerTitle">Contacts</div> 
</div> 

Szenario 2:

<div class="recordNew"> 
     <div class="recordHeader1"> 
     <ul> 
      <li> 
      <div class="arrowContainer"> 
       <a href="#" class="downArrow k-icon k-minus"></a> <!-- This element --> 
      </div> 
      </li> 
      <li> 
      <div class="nameContainer"> 
       <span class="name">John Doe </span> 
      </div> 
      </li> 
     </ul> 
     </div> 
     <span class="job-title">Marketing Professional </span> 
     </div> 
    </div> 

Was ich versucht habe?

// This is a generic function that makes the header clickable based on any element click 
function makeRowClickable() { 
    $(".headerTitle, .name, .job_title, .foundIcon").on("click", function(e) { 
    // doesn't seem to work and find the correct element 
    console.log($(e.target).closest(".header1").find(".downArrow")); 
    }); 
} 

Answer 1

Versuchen Sie, dieses

const headerClick = (e, header, downArrow) => { 
    // programatically click on the anchor tag 
    downArrow.click(); 
} 

// get all .header1 elements 
[...document.querySelectorAll('.header1')] 

    // add all .recordHeader1 elements to the array 
    .concat([...document.querySelectorAll('.recordHeader1')]) 

    // add event listener on each .header1 and .recordHeader1 
    .forEach((header) => header.addEventListener('click', (e) => { 

    // inside the click handler send the event, the header element, and its child downarrow element 
    headerClick(e, header, header.querySelector('.downArrow')) 

    }));