Traversing to specific children - jQuery/Javascript

Question

I have the following DOM structures given below and I would like to get to the hyperlink buttons (a) in both the scenarios. I have made both the header's (header1 and recordHeader1) clickable (cursor:pointer). So if I click on say anywhere (say if I click on the headerTitle) in header1 or (name, job_title) in recordHeader1, I would like to find the hyperlink button and perform certain click functionality. There might be more of those scenario but in all the scenario's, there is a parent header like the one's given below and the parent header always has the hyperlink element somewhere in the DOM. Please let me know what I'm doing wrong here.

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

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

What I have tried?

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

you don't have an element with the `header1` class in your second example, so `.closest(".header1")` won't find anything — Michael Kunst, Jul 29 '16 at 14:44
Yes agreed, that is just an example to explain what I am trying to achieve. — Neophile, Jul 29 '16 at 14:45
No @MichaelKunst, there can be many, so I can't really target it with just an 'a'. However that 'a' always has a class called "downArrow" that I have mentioned in my question/example. — Neophile, Jul 29 '16 at 14:47
`.closest` will only find the closest ancestor that matches the selector, not siblings, ancestor siblings, or the children of ancestor siblings — highvolt, Jul 29 '16 at 14:55
Oh may be that's why it isn't working for me. But the find after the closest should take me to the correct element right? — Neophile, Jul 29 '16 at 14:57
If all of your comma-separated selectors whose `click` events you are manipulating have a common ancestor or one of several, you can use `.closest` to find that ancestor, and then `.find` to get a child anywhere inside that element. — highvolt, Jul 29 '16 at 15:00
So basically closest can't be used then because the header class can change and the position of that child element is not always in the same place. Any more suggestions? — Neophile, Jul 29 '16 at 15:19

Daniel Lizik · Accepted Answer · 2016-07-29T15:24:14.140

2

Try this

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

  }));

edited Jul 29 '16 at 15:24

answered Jul 29 '16 at 14:54

Daniel Lizik

3,058
2
20
42

Hi Daniel, will this cater for any header element? My header element isn't always .header1. – Neophile Jul 29 '16 at 15:19
you just need to keep concatenating selectors into your array. `querySelector` will traverse the dom tree for you. – Daniel Lizik Jul 29 '16 at 15:24
Hi @Daniel_L, this does work however when I click on my other hyperlink elements, it performs the downArrow click as well. Is there a way to avoid that? – Neophile Jul 29 '16 at 15:34
"when I click on my other hyperlink elements" yes...that is the default behavior of the `a` tag, correct? – Daniel Lizik Jul 29 '16 at 15:59
Yeah but I don't want other `a` tags to perform this click as well as they open up other links. The elements that I mentioned above that should perform this click can be anything but another `a` tag. Is that possible? Also the above code fails to work in IE :(. It fails on that `=>` operator, says syntax error and doesn't recognize it. – Neophile Jul 29 '16 at 16:03
it would be much easier to assign an `onclick` event on the specific headers you want to trigger this business rule, rather than having to walk and filter out nodes. – Daniel Lizik Jul 29 '16 at 16:16
Also @Daniel, how do I replace the arrow operator with a normal function? Its erroring in IE for some unknown reason. – Neophile Aug 01 '16 at 08:21

Traversing to specific children - jQuery/Javascript

1 Answers1