Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using id attribute from parent element

See original GitHub issue

I have a page structure like this:

<section id="section1">
  <h3>Section 1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

Is it possible to apply AnchorJS to the h3 elements, while using the existing id from its parent section?

The obvious solution anchors.add('section h3'); would generate new id attributes for the h3 tags which I would like to avoid. And using anchors.add('section'); will add the anchors after the section and no the the h3.

Issue Analytics

State:
Created 6 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

2reactions

bryanbrauncommented, Jun 2, 2017

WAIT! I just remembered! We recently added a feature for these kinds of situations that hadn’t been documented (or released) yet!

In short, you can use a data-anchor-id attribute pointing to the id you want it link to:

<section id="some-section">
    <h2 data-anchor-id="some-section">Some section</h2>
</section>

There’s more details in that PR. You can find the code in the master branch, but it isn’t in a release yet. Let me see if I can get a new release (and updated docs) out this weekend.

1reaction

bryanbrauncommented, Jun 2, 2017

Ok, I just released 4.0.0, and the docs for this new feature can be found here: https://www.bryanbraun.com/anchorjs/#section-ids. Let me know if there are any other questions.

Top Results From Across the Web

arrays - How can I get an element's attribute from the parent's ...

This work fine pure javascript: document.getElementById("col1").getElementsByTagName("img")[0].getAttribute("src");.

jQuery: How can I find the ID attribute of a parent element with ...

From your current example, I believe you want to get id “apple” from “#test” element. You can select its parent with 3 main...

Get Attribute of a Parent Node Using JavaScript - Linux Hint

The “parentElement” property gives the parent element of the associated element. Whereas the “getAttribute()” method returns the value of an element's attribute ......

Selectors - W3C

The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID...

jQuery parent() Method - W3Schools

The parent() method returns the direct parent element of the selected element. The DOM tree: This method only traverse a single level up...