jquery selecting certain 'level' of elements?

Question

Say I have the following markup:

<div>
    <h3><a href="">link I want to select</a></h3>
        <div>
             <h3><a href="">link</a></h3>
        </div>
    <h3><a href="">link I want to select</a></h3>
    <h3><a href="">link I want to select</a></h3>
    <a href="">link</a>
</div>

Assuming the following...

• The elements I want to find are all at the same level of nesting
• I may not know what the specific nesting elements are (so can't use a specific selector)

...is there a clever way to select 'first anchor tag, and all other anchor tags that are nested at that same level' so that it returns the 1st, 3rd, and 4th links?

Worse case, we need to go in and just add specific classes to our HTML, but it'd be great if this could be done via pure selectors.

Answer 1

If you want to select all links under an h3:

var $links = $('h3 a');

Edit: Sorry, I didn't read that closely apparently. Maybe you could try the following (note this is not tested):

var $links = $(div > * > a);

Answer 2

Check out siblings() and :first.

Answer 3

$('a:first').parent().siblings().children('a');

Answer 4

Not a pure selector, but how about:

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

You can use parentsUntil() to get the distance between #myanchor and a specific parent, if that helps.

Answer 5

How about this?

$(function () {
// I take it you need some way to get the reference element.
var referenceElement = $('a').eq(0);
// Build the selector by making as many child selectors as our nesting level.
var selector = '';
var currentElement = referenceElement;
while (currentElement[0].parentNode !== document.body) {
    selector = (selector ? '* > ' + selector : '*');
    window.console && window.console.debug(currentElement, '!==', document.body, ' => ', currentElement.parent(), '; selector = ', selector);
    currentElement = currentElement.parent();
}
// Replace the tagName stuff with '*' if you want any element to match.
selector = 'body > ' + selector + ' > ' + referenceElement[0].tagName;
window.console && window.console.log(selector, ' => ', $(selector));

});