Jquery select outermost div from nest of selected divs

Question

I am trying to use jQuery to select a div, but ignore all selected divs that are children of the selected div. No divs have any other way of identifying them than the HREF , which I map to. For instance:

 outerdiv = $('a[href^="http://bizmate."]').closest('div'); outerdiv.prepend("This was selected") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Won't be selected <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> </div> </div> <div> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> 

This code selects all divs , including the child. How can I limit it to only selecting an external div that satisfies the condition while ignoring the child divs that also satisfies the given condition?

Edit:

Currently this example will give:

Will not be selected
It was selected according to Bizmate.
It was selected according to Bizmate.
It was selected according to Bizmate.
It was selected using Bizmate.

I want the result to be:

Will not be selected
It was selected according to Bizmate.
Powered by Bizmate
Powered by Bizmate
This has been selected Powered by Bizmate

Answer 1

This will select any top-level parent, regardless of the number of clusters or their exact structure, filtering out children based on the number of links found in the tree:

 var link = 'a[href^="http://bizmate."]', outerdiv = $(link).filter(function() { var total = $(this).parents('div:last').find(link).length; if (total > 1) { var parent = $(this).closest('div').find(link).length; if (parent == total) return $(this); } else return $(this); }).closest('div'); outerdiv.prepend("This was selected"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Won't be selected <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> </div> </div> <div> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> 

Answer 2

Use has() and last () .

• a[href^="http://bizmate."] : selects all the anchor elements, the href value starts with (^) " http: // bizmate .".
• :last : select the last item from the matched set
• closest('div') : Gets the closest matching ancestor

Demo:

 $('div > a[href^="http://bizmate.in"]').each(function() { $(this).parents('div:has(> a[href^="http://bizmate.in"])') .last().addClass('hello'); }); 

 .hello > a { border: solid 1px green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Won't be selected <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> </div> </div> <div> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> 

Answer 3

  $('a').click(function(event){ event.preventDefault(); var x = $(this).closest('div') $(x).prepend("This was selected"); }); 

Answer 4

You can add the class to the parent div and do the following:

HTML:

 <div>Won't be selected <div class="test"> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> <div> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> </div> </div> <div> <div class="test"> Powered by <a href="http://bizmate.in">Bizmate</a> </div> </div> 

JS:

 outerdiv = $('a[href^="http://bizmate."]').closest('div.test'); $(outerdiv).prepend("This was selected") 

Here is the fiddle: https://jsfiddle.net/hg989ffp/