遍历特定 children - jQuery/Javascript

Question

我有下面给出的 DOM 结构，我想在这两种情况下都访问超链接按钮 (a)。我已将 header（header1 和 recordHeader1）设为可点击（光标：指针）。因此，如果我单击 header1 中的 header 标题或 recordHeader1 中的（名称，job_title）中的任何地方说（比如我单击 header 标题），我想找到超链接按钮和执行某些点击功能。可能会有更多这样的场景，但在所有场景中，有一个 parent header 就像下面给出的那样， parent header 总是在某处有超链接元素DOM。请让我知道我在这里做错了什么。

场景一：

<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>

场景二：

  <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>

我试过什么？

// 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

试试这个

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'))

  }));

遍历特定 children - jQuery/Javascript

Traversing to specific children - jQuery/Javascript

html

javascript

jquery

jquery-traversing