link I want to select

Geek Answers Handbook

Jquery by selecting a specific "level" of elements?

Let's 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 at the same level of nesting
  • Perhaps I don’t know what the specific elements of nesting are (so you cannot use a specific selector)

... is there a smart way to select “the first anchor tag and all other anchor tags that are nested at the same level” so that it returns 1, 3, and 4 links?

In the worst case scenario, we need to go in and just add specific classes to our HTML, but it would be great if this could be done using pure selectors.

+7
jquery css-selectors
source share
7 answers

Not a pure selector, but what about:

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

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

+9
source share

Check out siblings () and : first .

+1
source share
 $('a:first').parent().siblings().children('a');
+1
source share

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

});

+1
source share

I wrote this jQuery function that should do the job.

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); } });
0
source share

Use Class Attribute

 <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 });
0
source share

If you want to select all links under h3:

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

Edit: Sorry, I did not read this for sure. Perhaps you could try the following (note that this has not been verified):

 var $links = $(div > * > a);
-one
source share

More articles:


All Articles