How to target a class for an a tag inside a heading?

what I have so far
nextSibling.previousElementSibling.****.classList.contains("collapsed")

this part returns the heading: nextSibling.previousElementSibling
and the *** is the missing part, which has basically this structure: a heading with two a tags, in the first one it should check for the class collapsed

Did you try querySelector("a")? I can’t try it currently, but it should only select the first a element in your heading

1 Like

Thanks, that I’m afraid would target all the a tags (from all the headings) and then select the first from them, instead of only the a tag for an specific heading.

It would probably be easier if you would just post a sample of the code (HTML and JS) you have.

I meant not document.query…, just inserted for the ****

Oh I see thanks! I’m getting this from the console
http://localhost/wordpress/page-path/#
for nextSibling.previousElementSibling.querySelector("a"))
wait : I’m trying some stuff based on this idea

@tzerio Thank you I didn’t’ know you could do that, your code was fine, it was a problem on my side… thanks again :slight_smile:

Well I ended up with this resulting code:

const margenCollapseHeadings = (event) => {
        event.target.parentElement.parentElement.classList.add("margen-collapse-heading");
        event.target.parentElement.parentElement.setAttribute('okey', 'roger');
  }

var items2 = document.getElementsByClassName('anchor-link-collapse');
for (var i2 = 0; i2 < items2.length; i2++) {
  items2[i2].addEventListener('click', margenCollapseHeadings);
}

is there a better way to debug than:
event.target.parentElement.parentElement.setAttribute('okey', 'roger');
there must be or hope so…

Do you mean to check whether the class got successfully added?
In your first post you had classList.contains(), wouldn’t this one help you?
Otherwise, could you elaborate what exactly you want it to do :slightly_smiling_face:

P.S. there is also classList.toggle, if you want the same function to add and remove the class

1 Like

I mean to check where the class is being added…
and what can be done width [object HTMLHeadingElement] output on the console.log to get more info about the elements instead of only that message?

Nicee! was using this… thank you!!! :slight_smile:

const margenCollapseHeadings = (event) => {

  if (event.target.parentElement.parentElement.classList.contains("margen-collapse-heading")) {
    event.target.parentElement.parentElement.classList.remove("margen-collapse-heading");
  }
  else {
    event.target.parentElement.parentElement.classList.add("margen-collapse-heading");
    //event.target.parentElement.parentElement.setAttribute('okey', 'roger');
    
  }

The easiest solution is probably having the devtools open and watching for the blinking spot when clicking on the link :sweat_smile:
Or giving the class a side effect like changing the background color…

Maybe you used document.write() to get [object HTMLHeadingElement] ? It looks like javascript tried to convert that h* to a string :thinking:

I did a console.log(event.target.parentElement.parentElement); , it prints that whole element including the children in collapsed menus to the console

1 Like

You can also break on attribute modifications.

In the inspector right-click the DOM node that is getting the class added and select “Break on” > “attribute modifications”. If the class is added it will stop the code and put you into the debugger inside the code that did the attribute modification (adding a class is one such action).

2 Likes

Thanks to both!!

Very good stuff!!

Would have to recheck the code to find the examples, let me see if I find them to resolve the mystery… I can tell I didn’t use document.write() at least