JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<div>
    <h3><a href="">link I want to select</a></h3>
        <div>
             <h3><a id='pear' href="">link</a></h3>
        </div>
    <h3><a id='apple' href="">link I want to select</a></h3>
    <h3><a id='mango' href="">link I want to select</a></h3>
    <a id='walnut' href="">link</a>
    <a id='peanut' href="">link</a>
    <div>
        <div>
            <div>
                <h3><a id='mango' href="">supernested link</a></h3>
                <h3><a id='strawberry' href="">supernested link</a></h3>
                <h3><a id='blackberry' href="">supernested link</a></h3>
                <h3><a id='wildberry' href="">supernested link</a></h3>
                <h3><a id='lime' href="">supernested link</a></h3>
                <h3><a id='tomato' href="">supernested link</a></h3>
            </div>
        </div>
    </div>
</div>

<h3>Output Area</h3>
<output>
</output>

CSS

output{
    font-family: monospace;
    white-space: pre;
    white-space: pre-wrap;
}

JavaScript

// Just put out some results
function outputify(someText){
    var $output = $('output');
    $output.text($output.text()+' '+someText);
}

// Executing
var depth = $('#mango').parents().length;

outputify('outputing... ');

outputify('mango parents depth: '+depth);


var all_at_depth = $("a").filter( function() { 
        $(this).parents().length == depth; 
    });

outputify(all_at_depth.length);

outputify('Done');