navigating up and down html elements using css selectors

Question

navigating up and down html elements using css selectors

Within my code, I have this odd repetitive HTML structure (with no classes) and I'm looking to extract all links along with the accompanying text below each link.

While it's simple enough to grab all the links using a basic CSS query selector like a, I also need to retrieve the text located within a sibling element of the ancestor of each link. This requires traversing up through the levels of divs before moving back down again.

Does anyone have any suggestions on how to ascend and then descend using a CSS selector?

...
...
...

<div>                                   <----first level of div
    <div>                               <----second level of div
        <span>
            <span>
                <div>                   <----third level of div
                    <a href="">         <----element that I can easily capture
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture        <----text I am trying to obtain
            </span>
        </span>
    </div>

<div>
...
...
...

jquery css css-selectors dom-traversal

Answer 1

Answer №1

When navigating the DOM, remember to use .parent() to move up a level, .children() to go down, and .next() to access the next sibling element. By combining these methods effectively, you can traverse from an a tag to the text span directly below it.

let result = $();
$("a").each(function() {
    let first_level = $(this).parent().parent().parent().parent();
    let sibling = first_level().next().next();
    let text_element = sibling.children().children()
    result = result.add(this).add(text_element);
})

Answer 2

When navigating the DOM, remember to use .parent() to move up a level, .children() to go down, and .next() to access the next sibling element. By combining these methods effectively, you can traverse from an a tag to the text span directly below it.

let result = $();
$("a").each(function() {
    let first_level = $(this).parent().parent().parent().parent();
    let sibling = first_level().next().next();
    let text_element = sibling.children().children()
    result = result.add(this).add(text_element);
})

Answer 3

Answer №2

As of now, there is no direct CSS parent selector available.

If the structure of your document follows the example you provided, navigating through the DOM is quite simple.

Array.from(document.querySelectorAll('a')).forEach(a => {
  let node = a;
  for (let i = 0; i < 5; i++) node = node.parentNode;
  console.log(a.innerText + ' : ' + node.children[2].children[0].children[0].innerText);
});

<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 1</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 1
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 2</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 2
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 3</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 3
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 4</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 4
            </span>
        </span>
    </div>
<div>

Answer 4

As of now, there is no direct CSS parent selector available.

If the structure of your document follows the example you provided, navigating through the DOM is quite simple.

Array.from(document.querySelectorAll('a')).forEach(a => {
  let node = a;
  for (let i = 0; i < 5; i++) node = node.parentNode;
  console.log(a.innerText + ' : ' + node.children[2].children[0].children[0].innerText);
});

<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 1</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 1
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 2</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 2
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 3</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 3
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 4</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 4
            </span>
        </span>
    </div>
<div>

navigating up and down html elements using css selectors

Answer №1

Answer №2

Similar questions

Pause the YouTube video when the modal is closed, following an AJAX load

Unable to send a value to a CodeIgniter controller using AJAX

Generate a hard copy of the data table row without needing to view it beforehand

When a string begins with the "<" character, jQuery regex is unable to find a match

Having a problem with file uploads in node.js using multer. The variables req.file and req.files are always coming

Retrieve numerical data from the element and enclose it within a span tag

Is the AJAX $.ajax() function and setInterval() method activated only when a user is actively viewing the page?

retrieve the current image source URL using JavaScript

Has anyone created a modified version of jRails that is compatible with Rails 2.3 and jQuery 1.4?

Revolutionary AJAX technology seamlessly updates and refreshes elements within every row or form on a webpage

Leverage the power of PHP array values in your Javascript code

Unable to ajax post on IE10

How can you ensure that text inside a tag is styled as italic using font-style: italic and the !important keyword in HTML and CSS?

Obtain the class attribute of a CSS element with whitespaces using PHP's XML/HTML

Add the AJAX response to the dropdown menu options

Customize the Emotion Styled Material UI Tab Indicator Overwrite

Styling Rules for WebKit Browsers

Generate a text input field within a dropdown menu

I am looking to insert a jQuery value or variable into the plugin options

Retrieving the response data from a jQuery AJAX call prior to executing the success function