jquery selecting certain 'level' of elements?

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 e开发者_运维知识库lements 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.

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.

Check out siblings() and :first.

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

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));

});

I wrote this jQuery function which should do the work.

Example: https://jsfiddle.net/xvcby8kL/2/

$.extend({

    /**
     * Returns set of same elements on the same DOM depth
     *
     * @param {string} selector of the referencing element
     * @param [{string} parent, body by default]
     * @returns {jQuery} set of elements
     */
    getSameLevelElements: function (selector, parent) {

        if (typeof parent === 'undefined') {
            parent = 'body';
        }

        var el = $(selector).first();

        if (el.length < 1) {
            return $();
        }

        var depth = el.parents(parent + ' *').length;

        for (var i = 0; i < depth; i++) {
            parent += ' > *';
        }

        selector = parent + ' > ' + el.get(0).tagName.toLowerCase();

        return $(selector);

    }

});

Use attribute Class

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

Jquery:

$(".select").each(function(){
//functionality
});

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);